CSS在React中的应用

如何使用CSS来给React应用程序设置样式

使用React，你有各种方法来给你的组件添加样式。

使用类和CSS

第一个也是最简单的方法是使用类，并使用一个普通的CSS文件来针对这些类。

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

.button {
  background-color: yellow;
}

你可以使用导入语句导入样式表，像这样。

而Webpack会负责将CSS属性添加到bundle中。

使用样式属性

第二种方法是使用附加在JSX元素上的style 属性。使用这种方法，你不需要一个单独的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 ，由于它使用了Autoprefixer，这些样式默认是自动前缀的。

另外，现在的样式是camelCased，而不是使用破折号。每当一个CSS属性有破折号时，就把它去掉，然后开始下一个词的大写。

样式有一个好处，那就是它是组件的本地属性，它们不能泄露给应用程序中其他部分的组件，这是使用类和外部CSS文件所不能提供的。

使用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}>A button</button>
}

这就是了!在生成的标记中，React将为每个渲染的组件生成一个特定的、唯一的类，并将CSS分配给该类，这样，CSS就不会影响其他标记。