React中的样式私有化方案

样式私有化实现方案

1. 内联式【行内样式】

2. 规范命名方案【人为控制组件最外层className不重复】

3. css Modules【文件命名为home.module.css，只能是css文件,不能是less、sass ...】

   import styles from './home.module.css'
   
   <div className="styles.box"></div>
   

4. react-jss

   import {createUseStyles} from 'react-jss'
   
   // 基于createUseStyles方法，构建组件需要的样式，返回结果是自定义hook函数【只能在函数组件中使用，如果在类组件中使用需要用高阶组件做代理】
   
   const useStyles = createUseStyles({
       // 设置类名
     box:{
       backgroundColor:'blue',
       '&:hover':{
         color:'red'
     }
     }
   })
   
   let { box } = useStyles   
   <div className={ box }></div>
   

5. 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/>