?? 如果還不了解 HTML 、 CSS和JS，可以參考本號(hào)下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。

在 CSS 簡介與語法 里說過，CSS 可以寫在 HTML 文檔中，也可以寫在獨(dú)立的 CSS 文檔里。

React 組件最終會(huì)生成 HTML，所以可以使用給普通 HTML 設(shè)置 CSS 一樣的方法來設(shè)置樣式。

React 中樣式的應(yīng)用方式

在 HTML 中，CSS 可以通過 style 或 class 兩種方式應(yīng)用。

style 中是直接寫的內(nèi)聯(lián)式樣式。

class 中應(yīng)用的是樣式類。

在 React 中，同樣對(duì)應(yīng)了兩種應(yīng)用方式。

1. 通過 style 應(yīng)用樣式
2. 通過 className 應(yīng)用樣式

通過 style 應(yīng)用樣式

通過 style 應(yīng)用的樣式屬于 React 的樣式寫法，寫法和普通的 CSS 有些不同。

React 樣式書寫規(guī)則

在 React 中寫的樣式，需要注意以下兩點(diǎn)：

1. 使用駝峰命名規(guī)則。比如 CSS 中的 font-size 要寫成 fontSize 。
2. 對(duì)于像素值 16px，只需要寫數(shù)字 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}>這是一個(gè)CSS使用樣例！</h2>   </div>   ;}export default SayHello;

在命名規(guī)則上，兩個(gè)要注意的地方：

另外，注意在應(yīng)用的時(shí)候，單大括號(hào)和雙大括號(hào)的區(qū)別。

使用 style 直接應(yīng)用樣式

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

直接使用的樣式，使用的是 {{}} 括號(hào)。

使用 style 通過樣式變量應(yīng)用樣式

也可以把上述例子中的樣式抽取出來，寫成變量，然后賦值給 style 。

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

這里注意，樣式類的名稱是使用單層大括號(hào)包裹起來的。

在樣式中使用條件

寫在 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}>這是一個(gè)CSS使用樣例！</h2>     <button onClick={() => setEnabled(!enabled)}>切換樣式</button>   </div> );}export default SayHello;

在上述代碼里，使用了狀態(tài) enabled ，通過它控制了文本顯示的樣式。

效果如下：

?

過 className 應(yīng)用樣式

如果把樣式寫到獨(dú)立的 .css 文件里，則可以通過樣式類來應(yīng)用。

這樣寫的樣式就是普通的 CSS，但是在應(yīng)用的時(shí)候，要使用 className 而不是 class 。

通過 .css 文件應(yīng)用樣式

把樣式代碼寫到單獨(dú)的 .css 文件中，通過 import 導(dǎo)入到組件中使用。

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

這樣用法就是要注意使用 className 。

通過 .module.css 文件應(yīng)用樣式

同樣是把樣式寫在文件里，但使用模塊更容易維護(hù)和使用。

使用 .module.css 擴(kuò)展名創(chuàng)建 CSS 模塊，例如： SayHello.module.css。

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

這樣在使用樣式的時(shí)候通過別名 styles 來應(yīng)用樣式，能獲得一定的代碼提示。

總結(jié)

最后來總結(jié)一下今天的內(nèi)容要點(diǎn)：

• ?? 在 React 中應(yīng)用樣式可以通過 style 和 className 兩種方式。
• ?? 通過 style 可以直接應(yīng)用樣式，可通過變量應(yīng)用樣式。
• ?? 通過 className 應(yīng)用樣式，可以是普通的樣式類，也可以寫成模塊化的 css。