CSS 样式

阅读2239

更新时间2025-08-20

备忘录

Sass 样式

使用 CSS 设置 React 样式的方式有很多种，本教程将详细介绍三种常用方式:

内联样式
CSS 样式表
CSS 模块

内联样式

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

实例:

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

const Header = () => {
  return (
    <>
      Hello Style!
      Add a little style!
    
  );
}

运行实例 »

注意: 在 JSX 中，JavaScript 表达式写在花括号内，由于 JavaScript 对象也使用花括号，所以上例中的样式写在两组花括号内 {{}}.

camelCased 属性名称

由于内联 CSS 是在 JavaScript 对象中编写的，因此带有连字符分隔符的属性，例如 background-color，必须使用驼峰式语法编写:

实例:

使用backgroundColor代替background-color:

const Header = () => {
  return (
    <>
      Hello Style!
      Add a little style!
    
  );
}

运行实例 »

JavaScript 对象

您也可以创建一个带有样式信息的对象，并在样式属性中引用它:

实例:

创建一个名为myStyle的样式对象:

const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      Hello Style!
      Add a little style!
    
  );
}

运行实例 »

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 (
    <>
      Hello Style!
      Add a little style!.
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

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 Hello Car!;
}

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();

运行实例 »