React CSS

定义和使用

使用 CSS 设置 React 样式的方法有很多，本教程将深入研究内联样式和 CSS 样式表。

内联样式

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

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

class MyHeader extends React.Component {
  render() {
    return (
      <div>
        <h1 style={{color: "red"}}>Hello CSS样式!</h1>
        <p>添加一点样式！</p>
      </div>
    );
  }
}

ReactDOM.render(<MyHeader  />, document.getElementById('root'));

尝试一下

注意：在 JSX 中，JavaScript 表达式写在花括号内，并且由于 JavaScript 对象也使用花括号，因此上例中的样式写在两组花括号 {{}} 中。

驼峰式属性命名

由于内联 CSS 是用 JavaScript 对象编写的，因此必须使用驼峰式语法编写具有两个名称（例如background-color）的属性。

使用 backgroundColor 代替 background-color：

class MyHeader extends React.Component {
  render() {
    return (
      <div>
        <h1 style={{backgroundColor: "lightblue"}}>Hello CSS样式!</h1>
        <p>添加一点样式！</p>
      </div>
    );
  }
}

ReactDOM.render(<MyHeader  />, document.getElementById('root'));

尝试一下

JavaScript 对象

您还可以创建带有样式信息的对象，并在 style 属性中对其进行引用：

创建一个名为 mystyle 的样式对象：

class MyHeader extends React.Component {   
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
        <h1 style={mystyle}>Hello CSS样式!</h1>
        <p>添加一点样式！</p>
      </div>
    );
  }
}

ReactDOM.render(<MyHeader  />, document.getElementById('root'));

尝试一下

外联样式

您可以在单独的文件中编写 CSS 样式，只需将文件扩展名为 .css 保存，然后将其导入应用程序即可。

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

App.css:

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

注意：您可以随心所欲地调用该文件，只需记住正确的文件扩展名即可。

注意，本示例的 React 代码环境围绕 npm 的构建环境进行学习，如不懂可以先阅读 React 环境搭建这章进行了解学习

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

index.js:

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

class MyHeader extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello CSS 样式!</h1>
        <p>添加一点样式！</p>
      </div>
    );
    
}
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

CSS 模块

向您的应用程序添加样式的另一种方法是使用 CSS 模块。

CSS 模块对于放置在单独文件中的组件很方便。

模块内部的 CSS 仅适用于导入模块的组件，您不必担心名称冲突。

创建扩展名为 .module.css 的 CSS 模块，例如：mystyle.module.css。

下面创建一个名为 “mystyle.module.css” 的新文件，并在其中插入一些 CSS 代码：

mystyle.module.css:

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

将样式表导入组件中：

App.js:

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

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

export default Car;

将组件导入您的应用程序：

App.js:

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

ReactDOM.render(<Car />, document.getElementById('root'));

定义和使用

内联样式

驼峰式属性命名

JavaScript 对象

外联样式

CSS 模块

相关页面