码农教程 - 一技在手,衣食无忧! tools

使用 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 对象也使用花括号，因此上例中的样式写在两组花括号内{{}}。

驼峰式属性名称

由于内联 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文件扩展名，并将其导入到您的应用程序中。

应用程序.css：

创建一个名为 "App.css" 的新文件并在其中插入一些 CSS 代码：

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

笔记：您可以随意命名该文件，只需记住正确的文件扩展名即可。

在您的应用程序中导入样式表：

索引.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 仅适用于导入它的组件，并且您不必担心名称冲突。

使用以下命令创建 CSS 模块.module.css扩展名，例如：my-style.module.css。

创建一个名为 "my-style.module.css" 的新文件并在其中插入一些 CSS 代码：

我的样式.module.css：

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

在组件中导入样式表：

汽车.js：

import styles from './my-style.module.css'; 

const Car = () => {
  return <h1 className={styles.bigblue}>Hello Car!</h1>;
}

export default Car;

在您的应用程序中导入组件：

索引.js：

import ReactDOM from 'react-dom/client';
import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

运行示例 »

通过练习测试一下

练习:

将以下 CSS 样式内联添加到 <h1> 元素

颜色="purple"

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

开始练习

❮ 上一节 下一节 ❯