CSS usage in React.js

This time I will bring you the use of CSS in React.js. What are the precautions for using CSS in React.js?The following is a practical case, let’s take a look.

Inline style (not recommended for web development, but widely used in React-Native)

The disadvantage is that animation, pseudo-classes (hover), etc. cannot be used

import React from 'react';export default class ComponentHeader extends React.Component {
render() {    const styleComponentHeader = {        header: {            backgroundColor: '#333333',            color: '#FFFFFF',            "padding-top": '15px',            paddingBottom: '15px'
        },        // 还可以定义其他的样式
    };    return (        <header>
            <h1>这里是头部</h1>
        </header>
    )
  }
}

2.

Expression in inline style: When clicked, padding-top and paddingBottom become larger or smaller

import React from 'react';export default class ComponentHeader extends React.Component {constructor() {  super();  this.state = {      miniHeader: false
  };
}
switchHeader() {  this.setState({      miniHeader: !this.state.miniHeader
  });
};
render() {  const styleComponentHeader = {      header: {          backgroundColor: '#333333',          color: '#FFFFFF',          "padding-top": this.state.miniHeader ? '3px' : '15px',          paddingBottom: this.state.miniHeader ? '3px' : '15px'
      },      // 还可以定义其他的样式
  };      return (          <header style={styleComponentHeader.header} onClick={this.switchHeader.bind(this)}>
              <h1>这里是头部</h1>
          </header>
      )
  }
}

3.CSS

ModularizationFirst npm the following three plug-ins

"babel-plugin-react-html-attrs": "^2.0.0","style-loader": "^0.13.1","css-loader": "^0.25.0"

Use the babel-plugin-react-html-attrs plug-in, when adding class to the label You can use class directly

<h1 class="smallFontSize">这里是头部</h1>

You cannot use class before using this plug-in, you can only use classname

<h1 className="smallFontSize">这里是头部</h1>

4. Interconversion between JSX style and CSS style

Copy the code on the right to where you want to use it. The specific usage is as follows:

import React from 'react';export default class ComponentFooter extends React.Component {
render() {    var footerConvertStyle = {        "miniFooter": {            "backgroundColor": "#333333",            "color": "#ffffff",            "paddingLeft": "20px",            "paddingTop": "3px",            "paddingBottom": "3px"
        },        "miniFooter_h1": {            "fontSize": "15px"
        }
    }    return (        <footer style={footerConvertStyle.miniFooter}>
            <h1 style={footerConvertStyle.miniFooter_h1}>这是页脚, 一般放置版权的一些信息.</h1>
        </footer>
    )
  }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

Vue.js uses transition animation to create route jump animation

Vue.js route naming and named views

Route parameters for Vue.js

The above is the detailed content of CSS usage in React.js. For more information, please follow other related articles on the PHP Chinese website!