CSS usage in React.js-JS Tutorial-php.cn

CSS usage in React.js

php中世界最好的语言

Release： 2018-03-13 14:56:50

Original

3090 people have browsed it

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>
    )
  }
}

Copy after login

CSS usage in React.js

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

import React from &#39;react&#39;;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: &#39;#333333&#39;,          color: &#39;#FFFFFF&#39;,          "padding-top": this.state.miniHeader ? &#39;3px&#39; : &#39;15px&#39;,          paddingBottom: this.state.miniHeader ? &#39;3px&#39; : &#39;15px&#39;
      },      // 还可以定义其他的样式
  };      return (          <header style={styleComponentHeader.header} onClick={this.switchHeader.bind(this)}>
              <h1>这里是头部</h1>
          </header>
      )
  }
}

Copy after login

CSS usage in React.js

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"

Copy after login

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

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

Copy after login

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

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

Copy after login

4. Interconversion between JSX style and CSS style

CSS usage in React.js

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

import React from &#39;react&#39;;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>
    )
  }
}

Copy after login

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!