React 中使用CSS的几种方式

第一种: 在组件中直接使用style

不需要组件从外部引入css文件，直接在组件中书写。

import React, {
    Component } from "react";
const div1 = {
   
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  //驼峰法
  minHeight: "200px",
  boxSizing: "border-box"
};
class Test extends Component {
   
  constructor(props, context) {
   
    super(props);
  }
  render() {
   
    return (
     <div>
       <div style={
   div1}>123</div>
       <div style="background-color:red;">
     </div>
    );
  }
}
export default Test;

注意事项:
在正常的css中，比如background-color，box-sizing等属性，在style对象div1中的属性中，必须转换成驼峰法，backgroundColor，boxSizing。而没有连字符的属性，如margin，width等，则在style对象中不变。
在正常的css中，css的值不需要用双引号("")，如

.App-header {
   
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;