React中CSS的7种使用方法，哪种最适合我的项目需求？

本文共计1268个文字，预计阅读时间需要6分钟。

第一种：直接在组件中使用style，无需组件从外部引入css文件，直接在组件中书写。

jsximport React, { Component } from 'react';

const div1={ width: '300px', margin: '30px auto', backgroundColor: ''};

第一种: 在组件中直接使用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 style={div1}>123</div> <div style="background-color:red;"> ); } } export default Test;

注意事项:

1. 在正常的css中，比如background-color，box-sizing等属性，在style对象div1中的属性中，必须转换成驼峰法，backgroundColor，boxSizing。