💡 如果还不了解 HTML 、 CSS和JS，可以参考本号下的 HTML21 天入门教程、 CSS 21 天入门教程和JS21天入门教程。

在 CSS 简介与语法 里说过，CSS 可以写在 HTML 文档中，也可以写在独立的 CSS 文档里。

React 组件最终会生成 HTML，所以可以使用给普通 HTML 设置 CSS 一样的方法来设置样式。

React 中样式的应用方式

在 HTML 中，CSS 可以通过 style 或 class 两种方式应用。

style 中是直接写的内联式样式。

class 中应用的是样式类。

在 React 中，同样对应了两种应用方式。

1. 通过 style 应用样式
2. 通过 className 应用样式

通过 style 应用样式

通过 style 应用的样式属于 React 的样式写法，写法和普通的 CSS 有些不同。

React 样式书写规则

在 React 中写的样式，需要注意以下两点：

1. 使用驼峰命名规则。比如 CSS 中的 font-size 要写成 fontSize 。
2. 对于像素值 16px，只需要写数字 16。

import React from 'react';function SayHello() { const contentStyle ={   fontSize: 16,   color: '#F60' } return <div>     <!-- 直接使用的 CSS 样式 -->     <h1 style={{color: "blue"}}>Hello, World!</h1>     <!-- 通过定义 CSS 样式使用 -->     <h2 style={contentStyle}>这是一个CSS使用样例！</h2>   </div>   ;}export default SayHello;

在命名规则上，两个要注意的地方：

另外，注意在应用的时候，单大括号和双大括号的区别。

使用 style 直接应用样式

import React from 'react';function SayHello() { return <div>     <!-- 直接使用的 CSS 样式 -->     <h1 style={{color: "blue"}}>Hello, World!</h1>   </div>   ;}export default SayHello;

直接使用的样式，使用的是 {{}} 括号。

使用 style 通过样式变量应用样式

也可以把上述例子中的样式抽取出来，写成变量，然后赋值给 style 。

import React from 'react';function SayHello() { const contentStyle ={   color: '#F60' } return <div>     <!-- 通过定义 CSS 样式使用 -->     <h1 style={contentStyle}>Hello, World!</h1>   </div>   ;}export default SayHello;

这里注意，样式类的名称是使用单层大括号包裹起来的。

在样式中使用条件

写在 React 里的样式，有更多的控制可能，比如说，使用条件控制。

import React, { useState } from 'react';function SayHello() { const [enabled, setEnabled] = useState(false); const contentStyle = {   fontSize: 16,   color: enabled ? '#F60' : '#ccc', }; return (   <div>     <h1 style={{ color: 'blue' }}>Hello, World!</h1>     <h2 style={contentStyle}>这是一个CSS使用样例！</h2>     <button onClick={() => setEnabled(!enabled)}>切换样式</button>   </div> );}export default SayHello;

在上述代码里，使用了状态 enabled ，通过它控制了文本显示的样式。

效果如下：

​

过 className 应用样式

如果把样式写到独立的 .css 文件里，则可以通过样式类来应用。

这样写的样式就是普通的 CSS，但是在应用的时候，要使用 className 而不是 class 。

通过 .css 文件应用样式

把样式代码写到单独的 .css 文件中，通过 import 导入到组件中使用。

import React from 'react';import './SayHello.css';function SayHello() { return (   <div>     <h2 className={contentStyle}>这是一个CSS使用样例！</h2>   </div> );}export default SayHello;

这样用法就是要注意使用 className 。

通过 .module.css 文件应用样式

同样是把样式写在文件里，但使用模块更容易维护和使用。

使用 .module.css 扩展名创建 CSS 模块，例如： SayHello.module.css。

import React from 'react';import styles from './SayHello.module.css';function SayHello() { return (   <div>     <h2 className={styles.contentStyle}>这是一个CSS使用样例！</h2>   </div> );}export default SayHello;

这样在使用样式的时候通过别名 styles 来应用样式，能获得一定的代码提示。

总结

最后来总结一下今天的内容要点：

• 🍑 在 React 中应用样式可以通过 style 和 className 两种方式。
• 🍑 通过 style 可以直接应用样式，可通过变量应用样式。
• 🍑 通过 className 应用样式，可以是普通的样式类，也可以写成模块化的 css。