react的行内样式和外链样式

一、行内样式

如果你的行内样式没有生效，看一下是不是写少了一个花括号

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

注意点：值得注意的是，style的后面我们写了两对大括号。最外面的一对是指我们要在html里面开启js执行环境，里面的一对是我们写的对象语法的括号。

二、外链样式

其中外链样式最简单，只需要在组件里面引入对应的外部样式就行。

MyStyle.css文件

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

MyStyle.jsx文件

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

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