开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

CSS模块化

CSS模块化就是我们常见的将样式代码单独写在一个文件里，通过在JS文件中引入该样式文件模块去定义样式。本文主要是记录在学习CSS 模块化内容时的一些重要知识点和使用方法。

实现CSS模块化的方式

实现CSS模块化的方式主要有两种：

• 第一种css module，这种实现方式依赖于webpack构建和css-loader等loader 处理，通常通过脚手架生成的项目，可以在配置文件中配置各种loader来实现，这种方式是将css交给js来动态加载样式。
• 第二种为css in js，这种方式主要是将样式代码转为在JS文件中书写，它用js对象方式写css ，然后作为style方式赋予给React组件的DOM元素，使得写法和用法上类似于JSX形式。常见的CSS IN JS的库位styled-components

css modules

css Modules方式，能够实现类似加载js模块一样的方式去加载css，它本质上是通过自定义的命名规则，然后生成唯一的样式类名，能够解决同名样式类全局污染，样式覆盖等问题。 自定义命名规则配置loader类似代码如下：

{
     test: /\.css$/,/* 对于 css 文件的处理 */
     use:[
        {
            loader: 'css-loader',
            options:{
              modules: {
                localIdentName: "[path][name]__[local]--[hash:base64:5]", /* 命名规则  [path][name]__[local] 开发环境 - 便于调试   */
              },
            }
        },
     ],
}

也可以利用:global(.className)全局类名来声明全局的样式，也可以继承基础的样式，实现样式扩展合并使用。

CSS IN JS

CSS IN JS这种方式最大的一个特点就是用js对象形式直接写style，或者直接将样式名作为标签或组件名来使用，如下形式：

/* 容器的背景颜色 */
// style.js
const box = {
    backgroundColor:'blue',
}
// 使用
import Style from './style.js
<div style={ Style.box }>基本用法</div>

CSS IN JS也可以继承样式，实现样式合并于扩展，如下所示：

const baseStyle = { /* 基础样式 */ }

const containerStyle = { 
    ...baseStyle,  // 继承baseStyle样式
    color:'#ccc'   // 添加的额外样式
}

style-components库的使用

如下首先引入styled-components，然后定义一个css样式类ButtonDiv，形成ButtonDiv组件

import styled from 'styled-components'
/* 给div标签添加样式，形成 ButtonDiv React 组件 */
const ButtonDiv = styled.div`
    background: #6a8bad;
    color: #fff;
    width: 96px;
    height :36px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
`
export default function Demo(){
    return <div>
        <ButtonDiv>按钮样式效果</ButtonDiv>
    </div>
}

也可以通过给生成的ButtonDiv组件添加props属性 ，来动态添加样式，如下所示：

const ButtonDiv = styled.div`
    background: ${ props => props.theme ? props.theme : '#6a8bad'  };
    color: #fff;
`
// 或者以下写法
const ButtonDiv = styled.duv<{theme: string}>`
    background: ${ ({theme}) => theme ? theme : '#6a8bad'  };
    color: #fff;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
`
export default function Demo(){
    return <div>
        <ButtonDiv theme={'#fc4838'}  >根据props传入的theme动态切换按钮样式</ButtonDiv>
    </div>
}