React CSS

17 Mar 2025 | 4 分钟阅读

React 中的 CSS 用于为 React 应用程序或组件设置样式。 style 属性是在 React 应用程序中用于设置样式的最常用属性，它会在渲染时添加动态计算的样式。它接受一个 JavaScript 对象，其中属性采用 camelCased 形式，而不是 CSS 字符串。有很多方法可用于使用 CSS 向 React 应用程序或组件添加样式。在这里，我们将主要讨论为 React 组件设置样式的四种方法，如下所示：

内联样式
CSS 样式表
CSS 模块
样式化组件

1. 内联样式

内联样式使用 JavaScript 对象以 style 名称的 camelCase 版本指定。它的值是样式的值，我们通常以字符串的形式获取。

示例

App.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "Green"}}>Hello JavaTpoint!</h1>
      <p>Here, you can find all CS tutorials.</p>
      </div>
    );
  }
}
export default App;

注意：您可以在上面的示例中看到，我们在
<h1 style={{color: "Green"}}>Hello JavaTpoint!</h1>.
中使用了两个花括号，这是因为在 JSX 中，JavaScript 表达式写在花括号内，而 JavaScript 对象也使用花括号，所以上面的样式写在两组花括号 {{}} 内。

输出

camelCase 属性名称

如果属性有两个名称，例如 background-color，则必须以 camel case 语法书写。

示例

App.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "Red"}}>Hello JavaTpoint!</h1>
      <p style={{backgroundColor: "lightgreen"}}>Here, you can find all CS tutorials.</p>
      </div>
    );
  }
}
export default App;

输出

使用 JavaScript 对象

内联样式还允许我们创建一个具有样式信息的对象，并在 style 属性中引用它。

示例

App.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    const mystyle = {
      color: "Green",
      backgroundColor: "lightBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello JavaTpoint</h1>
      <p>Here, you can find all CS tutorials.</p>
      </div>
    );
  }
}
export default App;

输出

2. CSS 样式表

您可以为您的 React 应用程序在一个单独的文件中编写样式，并将该文件保存为 .css 扩展名。现在，您可以在您的应用程序中导入此文件。

示例

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class App extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello JavaTpoint</h1>
      <p>Here, you can find all CS tutorials.</p>
      </div>
    );
  }
}
export default App;

App.css

body {
  background-color: #008080;
  color: yellow;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

输出

3. CSS 模块

CSS 模块是向应用程序添加样式的另一种方法。它是一个 CSS 文件，其中所有类名和动画名称默认都在本地范围内。它仅适用于导入它的组件，这意味着未经您的许可，您添加的任何样式都永远无法应用于其他组件，并且您永远不必担心名称冲突。您可以使用 .module.css 扩展名创建 CSS 模块，例如 myStyles.module.css 名称。

示例

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './myStyles.module.css'; 

class App extends React.Component {
  render() {
    return (
      <div>
      <h1 className={styles.mystyle}>Hello JavaTpoint</h1>
      <p className={styles.parastyle}>It provides great CS tutorials.</p>
      </div>
    );
  }
}
export default App;

myStyles.module.css

.mystyle {
  background-color: #cdc0b0;
  color: Red;
  padding: 10px;
  font-family: Arial;
  text-align: center;
}

.parastyle{
  color: Green;
  font-family: Arial;
  font-size: 35px;
  text-align: center;
}

输出

4. 样式化组件

Styled-components 是一个用于 React 的库。它使用增强的 CSS 来为应用程序中的 React 组件系统设置样式，它是用 JavaScript 和 CSS 的混合物编写的。

styled-components 提供

自动关键 CSS
没有类名错误
更容易删除 CSS
简单的动态样式
轻松的维护

安装

styled-components 库只需一个命令即可安装到您的 React 应用程序中。它是

示例

在这里，我们通过选择一个特定的 HTML 元素（例如 <div>、<Title> 和 <paragraph>）来创建一个变量，我们在其中存储我们的样式属性。现在我们可以使用我们的变量名作为包装器 <Div></Div> 类型的 React 组件。

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';

class App extends React.Component {
  render() {
    const Div:any = styled.div`
            margin: 20px;
            border: 5px dashed green;
            &:hover {
            background-color: ${(props:any) => props.hoverColor};
            }
            `;
    const Title = styled.h1`
            font-family: Arial;
            font-size: 35px;
            text-align: center;
            color: palevioletred;
            `;
    const Paragraph = styled.p`
            font-size: 25px;
            text-align: center;
            background-Color: lightgreen;
            `;
    return (
       <div>          
            <Title>Styled Components Example</Title>
            <p></p>
            <Div hoverColor="Orange">
                 <Paragraph>Hello JavaTpoint!!</Paragraph>
            </Div>
        </div>
    );
  }
}
export default App;

输出

现在，执行 App.js 文件，我们将获得如下所示的输出。

当我们移动鼠标指针到图像上时，它的颜色会改变，如下面的图像所示。

下一个主题React 动画

← 上一个下一个 →

React CSS

1. 内联样式

示例

camelCase 属性名称

使用 JavaScript 对象

2. CSS 样式表

示例

3. CSS 模块

示例

4. 样式化组件

安装

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React CSS

1. 内联样式

示例

camelCase 属性名称

使用 JavaScript 对象

2. CSS 样式表

示例

3. CSS 模块

示例

4. 样式化组件

安装

相关帖子

ReactJS useState Hook

ReactJS vs AngularJS

React 列表

React 表单

React 的优缺点

React 上下文

React Hooks

React Redux 示例

React 当前版本

React Map

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器