How to introduce css styles in react

How to introduce css style in react: first declare the style in the render function, such as [render() {let mystyle = {}}]; then reference the style, such as [return(afcd361c256f72ae3012842bfd45cdff16b28748ea4df4d9c2150843fecfba68);].

The environment of this article: windows10, react16&&css3 version, Dell G3 computer.

(Learning video sharing: react video tutorial)

React has three ways to introduce css styles:

1. Inline style: directly in the component Internal definition

<div style={{width:&#39;20px&#39;,height:&#39;30px&#39;}}>
    First Way!
</div>

2. Declaration style: first declare in the render function, and then quote

render() {
    let mystyle = {
         width:'20px',
         height:'30px'
    }

    return(
        <div style={mystyle}>
            Second Way!
        </div>
    );
}

3. Introduce style: introduce external css file, the external css file is ordinary css. Use the following statement after the import statement in the component js.

requre('./mystyle.css');

Related recommendations: js tutorial

The above is the detailed content of How to introduce css styles in react. For more information, please follow other related articles on the PHP Chinese website!