React.js中的CSS使用

這次帶給大家React.js中的CSS使用，使用React.js中的CSS注意事項有哪些，下面就是實戰案例，一起來看一下。

內聯樣式(網頁開發不建議使用,不過在React-Native中大量使用)

#缺點是動畫、偽類(hover) 等不能使用

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.內聯樣式中的表達式:當點擊時,padding-top和paddingBottom變大或變小

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模組化
先npm以下三個外掛程式

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

使用了babel-plugin-react-html-attrs外掛程式,當為標籤新增class就可以直接使用class了

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

未使用該外掛程式之前不能使用class,只能使用classname

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

4.JSX 樣式和CSS 樣式的互轉

#將右邊的程式碼複製到要使用的地方,具體使用如下:

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

#我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js使用過渡動畫製作路由跳轉動畫

Vue.js的路由命名和命名視圖

Vue.js的路由參數

#

以上是React.js中的CSS使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！