1、模块化作用

  • 防止全局污染，样式被覆盖
  • 命名混乱
  • css 代码冗余，体积庞大

2、CSS Modules

css-loader配置

  1. {
  2.     test: /\.css$/,/* 对于 css 文件的处理 */
  3.     use:[
  4.        'css-loader?modules' /* 配置css-loader ,加一个 modules */
  5.     ]
  6. }

css定义

  1. .text{
  2.     color: red;
  3. }

js文件

  1. import style from './style.css'
  2. export default () => 
  3. (
  4.   <div>
  5.     <div className={ style.text } >验证 css modules </div>
  6.     </div>
  7. )

3、自定义命名和全局变量

自定义规则命名

  1. {
  2.      test: /\.css$/,/* 对于 css 文件的处理 */
  3.      use:[
  4.         {
  5.             loader: 'css-loader',
  6.             options:{
  7.               modules: {
  8.                 localIdentName: "[path][name]__[local]--[hash:base64:5]", /* 命名规则  [path][name]__[local] 开发环境 - 便于调试   */
  9.               },
  10.             }
  11.         },
  12.      ],
  13. }

全局变量

  1. .text{
  2.     color: blue;
  3. }
  4. :global(.text_bg) {
  5.     background-color: pink;
  6. }
  1. import style from './style.css'
  2. export default ()=><div>
  3.     <div className={ style.text + ' text_bg'} >验证 CSS Modules </div>
  4. </div>

4、动态添加class

css定义：

  1. .base{ /* ...基础样式 */ }
  2. .dark{ // 主题样式-暗色调
  3.     background:#000;
  4.     color: #fff;
  5. }
  6. .light{// 主题样式-亮色调
  7.     border: 1px solid #000;
  8.     color: #000;
  9.     background: #fff;
  10. }

组件中引入 classNames 库：

  1. import classNames from 'classnames' 
  2. import Style from './index.less' /*  less css module */
  3. /* 动态加载 */
  4. export default function Index(){
  5.     const [ theme , setTheme  ] = React.useState('light')
  6.     return <div  >
  7.         <button  
  8.          className={ classNames(Style.base, theme === 'light' ? Style.light : Style.dark ) }  
  9.          onClick={ ()=> setTheme(theme === 'light' ? 'dark' : 'light')  }
  10.         > 
  11.            切换主题 
  12.         </button>
  13.     </div>
  14. }

5、CSS IN JS

在 index.js 写 React 组件：

  1. import React from 'react'
  2. import Style from './style'
  4. export default function Index(){
  5.     return <div  style={ Style.boxStyle }  >
  6.         <span style={ Style.textStyle }  >hi , i am CSS IN JS!</span>
  7.     </div>
  8. }

在同级目录下，新建 style.js 用来写样式：

  1. /* 容器的背景颜色 */
  2. const boxStyle = {
  3.     backgroundColor:'blue',
  4. }
  5. /* 字体颜色 */
  6. const textStyle = {
  7.     color:'orange'
  8. }
  10. export default {
  11.     boxStyle,
  12.     textStyle
  13. }

style-components库使用

  1. import styled from 'styled-components'
  2. /* 给button标签添加样式，形成 Button React 组件 */
  3. const Button = styled.button`
  4.     background: #6a8bad;
  5.     color: #fff;
  6.     min-width: 96px;
  7.     height :36px;
  8.     border :none;
  9.     border-radius: 18px;
  10.     font-size: 14px;
  11.     font-weight: 500;
  12.     cursor: pointer;
  13.     margin-left: 20px !important;
  14. `
  15. export default function Index(){
  16.     return <div>
  17.         <Button>按钮</Button>
  18.     </div>
  19. }

style-components 可以通过给生成的组件添加 props 属性 ，来动态添加样式。

  1. const Button = styled.button`
  2.     background: ${ props => props.theme ? props.theme : '#6a8bad'  };
  3.     color: #fff;
  4.     min-width: 96px;
  5.     height :36px;
  6.     border :none;
  7.     border-radius: 18px;
  8.     font-size: 14px;
  9.     font-weight: 500;
  10.     cursor: pointer;
  11.     margin-left: 20px !important;
  12. `
  13. export default function Index(){
  14.     return <div>
  15.         <Button theme={'#fc4838'}  >props主题按钮</Button>
  16.     </div>
  17. }