上一节:
下一节:

  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.cssCSS 模块,例如: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'));
    
上一节:
下一节: