使用 CSS 为 React 样式
有许多方法可以为 React 添加 CSS 样式，本教程将重点介绍三种常见的方法：
- 内联样式
- CSS 样式表
- CSS Modules
内联样式
要使用内联 style 属性为元素设置样式，其值必须是一个 JavaScript 对象。
示例
插入一个包含样式信息的对象
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
注意: 在 JSX 中，JavaScript 表达式写在大括号 `{}` 中，因为 JavaScript 对象也使用大括号，所以上面的示例中的样式写在了两层大括号 `{{}}` 中。
驼峰命名属性
由于内联 CSS 写在 JavaScript 对象中，像 `background-color` 这样的属性必须使用驼峰式命名法。
示例
使用 `backgroundColor` 代替 `background-color`。
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript 对象
您也可以创建一个包含样式信息的对象，并在 style 属性中引用它。
示例
创建一个名为 `myStyle` 的样式对象
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
CSS 样式表
您可以在单独的文件中编写 CSS 样式，只需将文件保存为 `.css` 文件扩展名，然后在您的应用程序中导入它。
App.css
创建一个名为 "App.css" 的新文件，并在其中插入一些 CSS 代码。
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
注意: 您可以为文件命名，但请记住正确的文件扩展名。
在您的应用程序中导入样式表
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
CSS Modules
向应用程序添加样式的另一种方法是使用 CSS Modules。
CSS Modules 对于放置在单独文件中的组件非常方便。
模块内的 CSS 仅对导入它的组件可用，您无需担心名称冲突。
使用 `.module.css` 扩展名创建 CSS 模块，例如：`my-style.module.css`。
创建一个名为 "my-style.module.css" 的新文件，并在其中插入一些 CSS 代码。
my-style.module.css
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
在您的组件中导入样式表
Car.js
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
在您的应用程序中导入组件
index.js
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
