React 组件添加样式的类型以下四种

1. 行内样式

    import React from 'react'
    class Hello extends React.Component{
        style = {
            width: '100px',
            height: '100px',
            background: 'red'
        }
        render () {
            return (
                <div>
                    {/* 直接在元素上以对象的形式来进行样式的定义 */}    
                    <p style={ this.style } > 行内样式 </p>
                </div>
            )
        }
    }

2. 外部引用

    import React from 'react'
    import './index.css' 
    // OR
    import './index.scss'
    // OR
    import './index.less' 
    class Hello extends React.Component{
        render () {
            return (
                <div>
                    {/* 通过className来给p元素添加一个类名，记住这里不能使用class关键字来给p添加类名 */}    
                    <p className = "text"></p>
                </div>
            )
        }
    }

3. 使用classname第三方模块

1. 先安装classname

   $ yarn add classname

2. 使用

    import React from 'react'
    import classname from 'classname'
    class Hello extends React.Component{
        render () {
            return (
                <div>
                    {/* 通过调用clasname，并且给里面的key添加布尔值，就可以确定这个类名是否要添加 */}    
                    <p className = {classname({
                        size: true,
                        bg: false
                    })}></p>
                </div>
            )
        }
    }
   

4. 样式组件

1. 先安装styled-component

   $ yarn add styled-components

2. 使用

    import React from 'react'
    import styled from 'styled-components'
    const Container = styled.div`
        width: 100px;
        height: 100px;
        background: #ccc;
    `
    class Hello extends React.Component{
        render () {
            return (
                {/* Container可以作为组件直接使用 */}
                <Container></Container>
            )
        }
    }