29-内联样式和样式表

React 中通过 import 直接引入外部的 CSS 样式表，但这并不是 React 中使用 CSS 的唯一方式，这里我们简单的罗列几种 React 中设置样式的方式。

内联样式

在 React 中可以直接通过标签的 style 属性来为元素设置样式。style 属性需要的是一个对象作为值，来为元素设置样式。

<div style={{color:'red'}}>
    我是Div
</div>

传递样式时，需要注意如果样式名不符合驼峰命名法，需要将其修改为符合驼峰命名法的名字。比如：background-color 改为 backgroundColor。

在内联样式中使用 State 动态设置样式对象

如果内联样式编写过多，会导致 JSX 变得异常混乱，此时也可以将样式对象定义到 JSX 外，然后通过变量引入。

设置样式时，可以根据不同的 state 值应用不同的样式，比如我们可以在组件中添加一个按钮，并希望通过点击按钮可以切换 div 的边框，代码可以这样写：

import React, {useState} from 'react';
import './App.css';

const App = () => {

    const [redBorder, setRedBorder] = useState(true);

    const pStyle = {
          color: 'red',
          backgroundColor: '#bfa',
          border: redBorder ? "red solid 1px" : "blue solid 1px"
    };

    const clickHandler = () => {
        setRedBorder(false);
    };

    return (
        <div>
            <p className={pStyle}>我是一个段落</p>
            <button onClick={clickHandler}>点我一下</button>
        </div>
    );
};

export default App;

外部样式表

StyleDemo.css

.myDiv{
    color: red;
    background-color: #bfa;
    font-size: 20px;
    border-radius: 12px;
}

.redBorder{
    border: 2px red solid;
}

StyleDemo.js

import React, {useState} from 'react';
import './StyleDemo.css';

const StyleDemo = () => {

    const [showBorder, setShowBorder] = useState(false);

    const toggleBorderHandler = ()=> {
      setShowBorder(prevState => !prevState);
    };

    return (
        <div className={`myDiv ${showBorder?' redBorder':''}`}>
            我是Div
            <button onClick={toggleBorderHandler}>切换边框</button>
        </div>
    );
};

export default StyleDemo;

CSS Module

如果没有类名冲突的问题，外部 CSS 样式表不失为是一种非常好的编写样式的方式。为了解决这个问题 React 中还为我们提供了一中方式，CSS Module。

我们可以将 CSS Module 理解为外部样式表的一种进化版，它的大部分使用方式都和外部样式表类似，不同点在于使用 CSS Module 后，网页中元素的类名会自动计算生成并确保唯一，所以使用 CSS Module 后，我们再也不用担心类名重复了！

CSS Module 在 React 中已经默认支持了（前提是使用了 react-scripts），所以无需再引入其他多余的模块。使用 CSS Module 时需要遵循如下几个步骤：

1. 使用 CSS Module 编写的样式文件的文件名必须为xxx.module.css
2. 在组件中引入样式的格式为import xxx from './xxx.module.css'
3. 设置类名时需要使用xxx.yyy的形式来设置

请看案例：

/*

StyleDemo.module.css

*/
.myDiv{
    color: red;
    background-color: #bfa;
    font-size: 20px;
    border-radius: 12px;
}

/*

StyleDemo.js

*/
import styles from './StyleDemo.module.css';

const StyleDemo = () => {
    return (
        <div className={styles.myDiv}>
            我是Div
        </div>
    );
};

export default StyleDemo;

这就是一个简单的 CSS Module 的案例，设置完成后你可以自己通过开发者工具查看元素的 class 属性，你会发现 class 属性和你设置的并不完全一样，这是因为 CSS Module 通过算法确保了每一个模块中类名的唯一性。

总之，相较于标准的外部样式表来说，CSS Module 就是多了一点——确保类名的唯一，通过内部算法避免了两个组件中出现重复的类名，如果你能保证不会出现重复的类名，其实直接使用外部样式表也是一样的。