React's inline style and external link style

1. Inline style

If your inline style does not take effect, check whether there is a missing curly brace.

export default class MyStyle extends Component {
  render() {
    return (
      <div>
        <div style={
   
   { margin: "auto",background:'#cfc' }}>
          <h1>我是一个h1标签,红色的</h1>
          <h2>我是一个h2标签,蓝色的</h2>
        </div>
      </div>
    );
  }
}

Note: It is worth noting that we wrote two pairs of braces after style. The outermost pair refers to the js execution environment we want to open in HTML, and the inner pair is the parentheses of the object syntax we wrote.

2. External link style

Among them, the external link style is the simplest. You only need to introduce the corresponding external style into the component.

MyStyle.css file

h1{
    color: red;
}
.title{
    background-color: #fcf;
}

MyStyle.jsx file

import React, { Component } from "react";
//外链样式引入
import "./MyStyle.css";

export default class MyStyle extends Component {
  render() {
    return <h1 className="title">我是一个h1标签,红色的</h1>
  }
}