CSS样式

React工程中，加载CSS样式一般是通过WebPack集成css-loader实现的，我们可以直接在JavaScript代码中引入CSS文件样式，也可以CSS Module形式引入样式，此外React也支持类似HTML的内联样式。这篇笔记我们介绍在React组件中引入CSS样式的各种方式。

直接引入CSS文件

我们可以直接在JavaScript代码中使用import引入CSS样式表文件。

app.css

.app {
  background-color: red;
}

App.jsx

import "./app.css";

const App = () => {
  return <div className="app">Hello, React!</div>;
};

export default App;

引入的CSS文件样式实际上会被注入到HTML页面中<head>下的<style>标签下，在JSX中我们直接使用className引用即可。

注：JSX中引入样式我们需要使用className而不是class，React给出的理由是class是JavaScript的关键字，如果你使用class引入样式实际上代码也能正确执行，但React会在控制台中打印警告信息。

使用CSS Module

css-loader也支持将CSS以模块形式引入，但要求CSS文件名必须使用.module.css后缀。

app.module.css

.app {
  background-color: red;
}

App.jsx

import styles from "./app.module.css";

const App = () => {
  return <div className={styles.app}>Hello, React!</div>;
};

export default App;

这种方式引入的CSS样式可以通过类似styles.app的形式访问CSS中的className名。

使用内联样式

JSX中的内联样式和HTML稍有不同，它需要给style属性传入一个对象，JSX中CSS属性都是CamelCase的，这也和原本的小写中横线不同，除此之外就没有什么其他的区别了。

const App = () => {
  return (
    <div style={{ backgroundColor: "#ff0000", padding: "15px" }}>
      Hello, React!
    </div>
  );
};

export default App;

使用内联样式时，需要注意的是类似15px这种取值，它是字符串且需要带着单位，而不要写成数字类型。

使用CSS预处理语言

除了直接使用CSS，我们还可以使用Less、SCSS等预处理语言编写样式，但使用这些语言需要安装对应的Loader，比如less-loader等。CRA创建的工程默认仅支持CSS，如果需要支持Less等其他CSS预处理语言则必须将配置eject再安装和配置Loader。如果是手动搭建的工程，我们引入对应的Loader即可。

有关具体如何使用这些CSS预处理语言可以参考相关的笔记章节，这里就不重复记录了。

作者：Gacfox