超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

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

在 CSS 簡(jiǎn)介與語(yǔ)法 里說(shuō)過(guò)，CSS 可以寫(xiě)在 HTML 文檔中，也可以寫(xiě)在獨(dú)立的 CSS 文檔里。

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

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

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

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

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

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

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

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

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

React 樣式書(shū)寫(xiě)規(guī)則

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

1. 使用駝峰命名規(guī)則。比如 CSS 中的 font-size 要寫(xiě)成 fontSize 。
2. 對(duì)于像素值 16px，只需要寫(xiě)數(shù)字 16。

import React from 'react';function SayHello() { const contentStyle ={   fontSize: 16,   color: '#F60' } return <div>     <!-- 直接使用的 CSS 樣式 -->     <h1 style={{color: "blue"}}>Hello, World!</h1>     <!-- 通過(guò)定義 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 通過(guò)樣式變量應(yīng)用樣式

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

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

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

在樣式中使用條件

寫(xiě)在 React 里的樣式，有更多的控制可能，比如說(shuō)，使用條件控制。

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 ，通過(guò)它控制了文本顯示的樣式。

效果如下：

?

過(guò) className 應(yīng)用樣式

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

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

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

把樣式代碼寫(xiě)到單獨(dú)的 .css 文件中，通過(guò) 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 。

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

同樣是把樣式寫(xiě)在文件里，但使用模塊更容易維護(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í)候通過(guò)別名 styles 來(lái)應(yīng)用樣式，能獲得一定的代碼提示。

總結(jié)

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

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