样式私有化实现方案
内联式【行内样式】
规范命名方案【人为控制组件最外层className不重复】
-
css Modules【文件命名为home.module.css，只能是css文件,不能是less、sass ...】import styles from './home.module.css' <div className="styles.box"></div> -
react-jssimport {createUseStyles} from 'react-jss' // 基于createUseStyles方法，构建组件需要的样式，返回结果是自定义hook函数【只能在函数组件中使用，如果在类组件中使用需要用高阶组件做代理】 const useStyles = createUseStyles({ // 设置类名 box:{ backgroundColor:'blue', '&:hover':{ color:'red' } } }) let { box } = useStyles <div className={ box }></div>
-
styled-components- 基于
styled.标签名这种方式编写 - 样式写在ES6的模版字符串中
- 返回并导出的结果是一个自定义组件
- 基于
// 1.新建一个MenuStyle.js文件
import styled from 'styled-components'
export const MenuBox = styled.menu`
background-color: #333;
width:100px;
.title{
font-size:20px
}
span{
&:hover{
color:${props=>props.hover}
}
}
`
// 2.在jsx文件中导入 MenuStyle.js
import { MenuBox } from './MenuStyle'
// 3.使用:在函数组件中return出来一个叫MenuBox的标签
<MenuBox>
<div className="title">
<span hover="blue">文字</span>
</div>
<MenuBox/>
