React写style的方法小结

1.行内样式

import react,{Component} from 'react';
export default class Parent extends Component{
    constructor(props){
        super(props);
        this.state = {
        }
    }
    render(){
        return(
            <>
                <p style={{color:'pink',backgroundColor:'blue'}} >parent</p>
            </>
        )
    }
}

2.声明样式

import react,{Component} from 'react';
export default class Parent extends Component{
    constructor(props){
        super(props);
        this.state = {

        }
    }
    style1={
        color:'pink',
        backgroundColor:'blue'
    }
    render(){
        return(
            <>
                <p style={this.style1} >parent</p>
            </>
        )
    }
}

3.引入外部css样式

import react,{Component} from 'react';
import './parent.css'
// require('./parent.css')
export default class Parent extends Component{
    constructor(props){
        super(props);
        this.state = {
        }
    }
    render(){
        return(
            <>
                <p className='styles'>parent</p>
            </>
        )
    }
}

关于外部样式的引入，可以使用import也可以使用require，这有什么不同呢，同样好奇的，可以看看下面的文章。
import和require的区别