React中设置样式

1. 行内样式

<div style={{fontSize:'100px'}}></div>

2.className

在react中设置class时使用className，然后引入对用的css文件

<div className="red”></div>

3.classnames

Npm地址：https://www.npmjs.com/package/classnames

方便我们在react中使用className，可以想vue一样进行动态的类型设置

4.在js中写css

styled-components 是针对react写的一套css-in-js框架，简单来说就是在js中写css，将css和js结合起来变成一个组件
中文地址：https://github.com/hengg/styled-components-docs-zh
官网：https://styled-components.com/docs

Vscode. 插件：vscode-styled-components

简单的例子：
styled-components.js

import styled from 'styled-components'
// styled.div 表示给div设置style；styled.a 表示给a标签设置style
const DivStyle = styled.div `    
	font-size: 100px;
	color: red;
`
export {    DivStyle}

Index.js

import { DivStyle } from './style-components'

class Main extends Component {
    render() {
        return (
            <div className="red">
                <DivStyle>hello world</DivStyle>
            </div>
        );
    }
}

结果：
会生成一个不会重复的类名

<div id="root”>
    <div class="red”>
        <div class="sc-bdfBwQ dQuyHO">hello world</div>
     </div>
</div>