,,

React 入門基礎：樣式 CSS 處理

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2024年12月5日 20:20 本文熱度 2534

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

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

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

React 中樣式的應用方式

在 HTML 中，CSS 可以通過 style 或 class 兩種方式應用。

style 中是直接寫的內聯式樣式。

class 中應用的是樣式類。

在 React 中，同樣對應了兩種應用方式。

通過 style 應用樣式
通過 className 應用樣式

通過 style 應用樣式

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

React 樣式書寫規則

在 React 中寫的樣式，需要注意以下兩點：

使用駝峰命名規則。比如 CSS 中的 font-size 要寫成 fontSize 。
對于像素值 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;