在React中使用CSS

如何使用CSS來為React應用程式添加樣式

在React中，你有多種方式來為組件添加樣式。

使用類別和CSS

第一種也是最簡單的方法是使用類別，在一個普通的CSS文件中為這些類別定義樣式：

const Button = () => {
 return <button className="button">一個按鈕</button>
}

.button {
 background-color: yellow;
}

你可以使用import語句導入樣式表，如下所示：

import './style.css'

Webpack會自動將CSS屬性添加到bundle中。

第二種方法是使用附加到JSX元素的style屬性。使用此方法，你不需要一個單獨的CSS文件。

const Button = () => {
 return <button style={{ backgroundColor: 'yellow' }}>一個按鈕</button>
}

現在CSS的定義略有不同。首先，請注意雙重大括號：這是因為style接受一個對象。我們傳入一個JavaScript對象，該對象在大括號中定義。我們也可以這樣做：

const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
 return <button style={buttonStyle}>一個按鈕</button>
}

在使用create-react-app時，這些樣式默認情況下會自動添加Autoprefixer來進行樣式前綴處理。

此外，現在的樣式是大小寫混合命名法，而不是使用破折號。每當一個CSS屬性有破折號時，將其刪除並使用下一個單詞開頭大寫的方式替代。

CSS模組是一個完美的折衷選擇：你使用類別，但是CSS的作用範圍限定在組件內，這意味著你添加的樣式不能自動應用到其他組件上，除非你明確允許。同時，你的樣式是在一個單獨的CSS文件中定義的，這比在JavaScript中使用CSS更容易維護（還可以使用你習慣的CSS屬性名稱）。

首先創建一個以.module.css結尾的CSS文件，例如Button.module.css。最好將其與要為其添加樣式的組件具有相同的名稱。

在這裡添加你的CSS，然後在要為其添加樣式的組件文件中導入它：

import style from './Button.module.css'

現在你可以在JSX中使用它了：

const Button = () => {
 return <button className={style.content}>一個按鈕</button>
}

就是這樣！在生成的標記中，React將為每個渲染的組件生成一個特定且唯一的類別，並將CSS分配給該類別，以使CSS不會影響到其他標記。

React中的CSS模組