react 中css樣式

Using React you have various ways to add styling to your components.

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

使用類和CSS (Using classes and CSS)

The first and most simple is to use classes, and use a normal CSS file to target those classes:

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

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

.button {
  background-color: yellow;
}

You can import the stylesheet using an import statement, like this:

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

import './style.css'

and Webpack will take care of adding the CSS property to the bundle.

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

使用樣式屬性 (Using the style attribute)

A second method is to use the style attribute attached to a JSX element. Using this approach you don’t need a separate CSS file.

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

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

CSS is defined in a slightly different way now. First, notice the double curly brackets: it’s because style accepts an object. We pass in a JavaScript object, which is defined in curly braces. We could also do this:

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

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

When using create-react-app, those styles are autoprefixed by default thanks to its use of Autoprefixer.

使用create-react-app ，由于使用了Autoprefixer ，這些樣式在默認情況下會自動前綴 。

Also, the style now is camelCased instead of using dashes. Every time a CSS property has a dash, remove it and start the next word capitalized.

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

Styles have the benefit of being local to the component, and they cannot leak to other components in other parts of the app, something that using classes and an external CSS file can’t provide.

樣式的優點是對于組件來說是本地的，并且不會泄漏到應用程序其他部分的其他組件，這是使用類和外部CSS文件無法提供的。

使用CSS模塊 (Using CSS Modules)

CSS Modules seem to be a perfect spot in the middle: you use classes, but CSS is scoped to the component, which means that any styling you add cannot be applied to other components without your permission. And yet your styles are defined in a separate CSS file, which is easier to maintain than CSS in JavaScript (and you can use your good old CSS property names).

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

Start by creating a CSS file that ends with .module.css, for example Button.module.css. A great choice is to give it the same name as the component you are going to style

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

Add your CSS here, then import it inside the component file you want to style:

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

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

now you can use it in your JSX:

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

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

That’s it! In the resulting markup, React will generate a specific, unique class for each rendered component, and assign the CSS to that class, so that the CSS is not affecting other markup.

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

翻譯自: https://flaviocopes.com/react-css/

react 中css樣式