How to introduce styles in react

How to introduce styles in react: 1. Module style, introduction method [import './index.css';]; 2. Inline style, the code is [945a8042a15777d677f88bf73b384e9e].

Related learning recommendations: react video tutorial

The operating environment of this tutorial: windows7 system , React17 version, this method is suitable for all brands of computers.

How to introduce styles in react:

1. Module style

When you first build the framework, When I am about to start writing business, I will encounter the problem of how to introduce styles on the first page. I have encountered some pitfalls. Instead of using style, there is no need to name the header. Just introduce css directly. The introduction method is like this.

<div className=&#39;topHead back fs14&#39;>
     <img src=&#39;/images/highLevel.png&#39; className=&#39;levelSize&#39;/>
</div>

Use the form of className

Introduction method

import './index.css';

index.css

@import '~antd/dist/antd.css';
.topHead {
    width: 100%;
    height: 100px;
    display: flex;  
    align-items: center;
}
.back{
    background-image: url('/images/homeBackImg.png');
}
.levelSize{
    width: 80px;
    height: 80px; 
}
.levelColor{
    color:#ffffff;
}

2. Inline style

The inline style is different from the usual style='margin:0px', so

 <Divider style={{margin:&#39;0px&#39;}}/>
也是用的style，但书写方式不一样了

Related free learning recommendations: javascript (video)

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