使用 CSS 设置 React 样式
使用 CSS 设置 React 样式的方式有很多种，本教程将详细介绍三种常用方式:
- 内联样式
- CSS 样式表
- CSS 模块
内联样式
要使用内联样式属性设置元素的样式，值必须是 JavaScript 对象:
实例:
插入带有样式信息的对象:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
注意: 在 JSX 中，JavaScript 表达式写在花括号内，由于 JavaScript 对象也使用花括号，所以上例中的样式写在两组花括号内 {{}}.
camelCased 属性名称
由于内联 CSS 是在 JavaScript 对象中编写的，因此带有连字符分隔符的属性，例如 background-color，必须使用驼峰式语法编写:
实例:
使用backgroundColor代替background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript 对象
您也可以创建一个带有样式信息的对象，并在样式属性中引用它:
实例:
创建一个名为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 模块
向应用程序添加样式的另一种方法是使用 CSS 模块。
CSS 模块便于放置在单独文件中的组件。
模块内的 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 />);
