React 使用 CSS

React 使用 CSS 样式的方法有很多，本教程将详细介绍三种常见方法：

-内联样式-CSS 样式表-CSS 模块

内联样式

要使用内联样式属性设置元素样式，该值必须是 JavaScript 对象:

实例:

插入一个带有样式信息的对象:

import React from 'react';
import ReactDOM from 'react-dom';
const Header = () => {
  return (
    <>
      <h2 style={{color: "red"}}>Hello Style!</h2>
      <p>Add a little style!</p>
    </>
  );
}
ReactDOM.render(<Header />, document.getElementById('root'));

驼峰式命名属性

由于内联 CSS 是在 JavaScript 对象中编写的，因此带有连字符分隔符（如背景色 background-color）的属性必须使用驼峰大小写语法编写：

实例:

使用 backgroundColor 代替 background-color:

import React from 'react';
import ReactDOM from 'react-dom';
const Header = () => {
  return (
    <>
      <h2 style={{backgroundColor: "lightblue"}}>Hello Style!</h2>
      <p>Add a little style!</p>
    </>
  );
}
ReactDOM.render(<Header />, document.getElementById('root'));

JavaScript 对象

也可以使用样式信息创建对象，并在 "样式" 属性中引用该对象:

实例:

创建一个名为 myStyle:

import React from 'react';
import ReactDOM from 'react-dom';
const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h2 style={myStyle}>Hello Style!</h2>
      <p>Add a little style!</p>
    </>
  );
}
ReactDOM.render(<Header />, document.getElementById('root'));

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';
import './App.css';
const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}
ReactDOM.render(<MyHeader />, document.getElementById('root'));

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 <h2 className={styles.bigblue}>Hello Car!</h2>;
}
export default Car;

在应用程序中导入组件:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));