import React, { Component } from "react";

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  //駝峰法
  minHeight: "200px",
  boxSizing: "border-box"
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
     <div>
       <div style={div1}>123</div>
       <div style={{backgroundColor:"red"}}>
     </div>
    );
  }
}

export default Test;

上面可以看到，css屬性需要轉(zhuǎn)換成駝峰寫法這種方式優(yōu)點：

內(nèi)聯(lián)樣式, 樣式之間不會有沖突
可以動態(tài)獲取當(dāng)前state中的狀態(tài)

缺點：

寫法上都需要使用駝峰標(biāo)識
某些樣式?jīng)]有提示
大量的樣式, 代碼混亂
某些樣式無法編寫(比如偽類/偽元素)

組件中引入css文件

將css單獨寫在一個css文件中，然后在組件中直接引入

App.css文件：

.title {
  color: red;
  font-size: 20px;
}

.desc {
  color: green;
  text-decoration: underline;
}

組件中引入：

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">我是App的標(biāo)題</h2>
        <p className="desc">我是App中的一段文字描述</p >
        <Home/>
      </div>
    )
  }
}

這種方式存在不好的地方在于樣式是全局生效，樣式之間會互相影響

組件中引入 .module.css 文件

將css文件作為一個模塊引入，這個模塊中的所有css，只作用于當(dāng)前組件。不會影響當(dāng)前組件的后代組件

這種方式是webpack特工的方案，只需要配置webpack配置文件中modules:true即可

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.module.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">我是App的標(biāo)題</h2>
        <p className="desc">我是App中的一段文字描述</p >
        <Home/>
      </div>
    )
  }
}

這種方式能夠解決局部作用域問題，但也有一定的缺陷：

引用的類名，不能使用連接符(.xxx-xx)，在 JavaScript 中是不識別的
所有的 className 都必須使用 {style.className} 的形式來編寫
不方便動態(tài)來修改某些樣式，依然需要使用內(nèi)聯(lián)樣式的方式；

CSS in JS

CSS-in-JS，是指一種模式，其中CSS由 JavaScript生成而不是在外部文件中定義

此功能并不是 React 的一部分，而是由第三方庫提供，例如：

styled-components
emotion
glamorous

下面主要看看styled-components的基本使用

本質(zhì)是通過函數(shù)的調(diào)用，最終創(chuàng)建出一個組件：

這個組件會被自動添加上一個不重復(fù)的class
styled-components會給該class添加相關(guān)的樣式

基本使用如下：

創(chuàng)建一個style.js文件用于存放樣式組件：

export const SelfLink = styled.div`
  height: 50px;
  border: 1px solid red;
  color: yellow;
`;

export const SelfButton = styled.div`
  height: 150px;
  width: 150px;
  color: ${props => props.color};
  background-image: url(${props => props.src});
  background-size: 150px 150px;
`;

引入樣式組件也很簡單：

import React, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     &lt;div&gt;
       &lt;SelfLink title="People's Republic of China"&gt;app.js&lt;/SelfLink&gt;
       &lt;SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}&gt;
          SelfButton
        &lt;/SelfButton&gt;
     &lt;/div&gt;
    );
  }
}

export default Test;
復(fù)制代碼