React中的CSS

如何使用CSS設置React應用程序的樣式

使用React，您可以通過多種方式向組件添加樣式。

首先也是最簡單的方法是使用類，並使用普通的CSS文件將這些類作為目標：

const Button = () => {
  return <button className="button">A button</button>
}

.button {
  background-color: yellow;
}

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

import './style.css'

和Webpack將負責將CSS屬性添加到捆綁包中。

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

const Button = () => {
  return <button style={{ backgroundColor: 'yellow' }}>A button</button>
}

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

const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
  return <button style={buttonStyle}>A button</button>
}

使用時create-react-app，由於使用了這些樣式，因此這些樣式默認情況下會自動添加前綴自動前綴。

另外，樣式現在是駝峰式的，而不是使用破折號。每當CSS屬性帶有破折號時，請將其刪除，然後將下一個單詞大寫。

樣式的好處是對於組件來說是本地的，並且不會洩漏到應用程序其他部分的其他組件，這是使用類和外部CSS文件無法提供的。

CSS模塊似乎是中間的一個完美選擇：您使用類，但是CSS限於組件的範圍，這意味著您添加的任何樣式都無法在未經您許可的情況下應用於其他組件。但是，您的樣式是在單獨的CSS文件中定義的，它比JavaScript中的CSS易於維護（並且您可以使用舊的CSS屬性名）。

首先創建一個以結尾的CSS文件.module.css，例如Button.module.css。最好的選擇是給它與要樣式化的組件相同的名稱

在此處添加CSS，然後將其導入要設置樣式的組件文件中：

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

現在您可以在JSX中使用它：

const Button = () => {
  return <button className={style.content}>A button</button>
}

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

CSS Modules in React

免費下載我的反應手冊