1. React中的樣式
React并沒有像Vue那樣提供特定的區(qū)域給我們編寫CSS代碼
所以你會發(fā)現(xiàn)在React代碼中, CSS樣式的寫法千奇百怪

2. 內(nèi)聯(lián)樣式

• 內(nèi)聯(lián)樣式的優(yōu)點:
  • 內(nèi)聯(lián)樣式, 樣式之間不會有沖突
  • 可以動態(tài)獲取當前state中的狀態(tài)
• 內(nèi)聯(lián)樣式的缺點：
  • 寫法上都需要使用駝峰標識
  • 某些樣式?jīng)]有提示
  • 大量的樣式, 代碼混亂
  • 某些樣式無法編寫(比如偽類/偽元素)

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            color: 'red'
        }
    }
    render(){
        return (
            <div>
                <p style={{fontSize:'50px', color: this.state.color}}>我是段落1</p>
                <p style={{fontSize:'50px', color:'green'}}>我是段落2</p>
                <button onClick={()=>{this.btnClick()}}>按鈕</button>
            </div>
        );
    }
    btnClick(){
        this.setState({
            color: 'blue'
        })
    }
}
export default App;

3. 外鏈樣式
將CSS代碼寫到一個單獨的CSS文件中, 在使用的時候?qū)脒M來

• 外鏈樣式的優(yōu)點:
  • 編寫簡單, 有代碼提示, 支持所有CSS語法
• 外鏈樣式的缺點：
  • 不可以動態(tài)獲取當前state中的狀態(tài)
  • 屬于全局的css，樣式之間會相互影響

//Home.tsx文件
import React from 'react';
import './Home.css'
class Home extends React.Component{
    render() {
        return (
            <div id={'home'}>
                <p>我是home段落</p>
                <a href={'www.it666.com'}>我是home超鏈接</a>
            </div>
        )
    }
}
export default Home;

/*Home.css文件*/
#home p{
    font-size: 50px;
    color: red;
}
#home a{
    color: yellow;
}

4.Css Module

• React的腳手架已經(jīng)內(nèi)置了css modules的配置：
  • .css/.less/.scss 等樣式文件都修改成 .module.css/.module.less/.module.scss 等；
• Css Modules優(yōu)點
  • 編寫簡單, 有代碼提示, 支持所有CSS語法
  • 解決了全局樣式相互污染問題
• Css Modules缺點
  • 不可以動態(tài)獲取當前state中的狀態(tài)
    
    image.png
    
    那么怎樣解決Css Modules缺點不可以動態(tài)獲取當前state中的狀態(tài)的問題呢？
    先來了解一下模板字符串
    拓展點——模板字符串
    ES6中的模板字符串

const str = `my name is ${name}, my age is ${age}`;
console.log(str); // my name is yiya_xiaoshan, my age is 18

除此之外，react中還有一些ES6中沒有的特性
在JS中除了可以通過()來調(diào)用函數(shù)以外,,其實我們還可以通過模板字符串來調(diào)用函數(shù)

function test(...args) {
    console.log(args);
}
test(1, 3, 5); // [ 1, 3, 5 ]
test`1, 3, 5`; // [ [ '1, 3, 5' ] ]

通過模板字符串調(diào)用函數(shù)規(guī)律:

• 參數(shù)列表中的第一個參數(shù)是一個數(shù)組, 這個數(shù)組中保存了所有不是插入的值
• 參數(shù)列表的第二個參數(shù)開始, 保存的就是所有插入的值
  總結(jié)結(jié)論
  我們可以拿到模板字符串中所有的內(nèi)容\所有非插入的內(nèi)容
  =>我們可以拿到模板字符串中所有插入的內(nèi)容
  所以我們就可以對模板字符串中所有的內(nèi)容進行單獨的處理

test`1, 3, 5, ${name}, ${age}`; 
// [ [ '1, 3, 5, ', ', ', '' ], 'yiya_xiaoshan', 18 ]

4. CSS-in-JS
1. 使用CSS-in-JS的原因

• 在React中, React認為結(jié)構(gòu)和邏輯是密不可分的,所以在React中結(jié)構(gòu)代碼也是通過JS來編寫的
  正是受到React這種思想的影響, 所以就有很多人開發(fā)了用JS來編寫CSS的庫——styled-components / emotion
• 利用JS來編寫CSS, 可以讓CSS具備樣式嵌套、函數(shù)定義、邏輯復(fù)用、動態(tài)修改狀態(tài)等特性, 也就是說, 從某種層面上, 提供了比過去Less/Scss更為強大的功能,所以Css-in-JS, 在React中也是一種比較推薦的方式

2.styled-components使用

• 安裝styled-components
  npm install styled-components --save
• 導(dǎo)入styled-components
  import styled from 'styled-components';
• 利用styled-components創(chuàng)建組件并設(shè)置樣式
  styled.divxxx:xxx

import React from 'react';
import styled from 'styled-components';
// 注意點:
// 默認情況下在webstorm中編寫styled-components的代碼是沒有任何的代碼提示的
// 如果想有代碼提示, 那么必須給webstorm安裝一個插件
const StyleDiv = styled.div`
    p{
        font-size: 50px;
        color: red;
    }
    a{
       font-size: 25px;
       color: green;
    }
`;
class Home extends React.Component{
    render() {
        return (
            <StyleDiv>
                <p>我是home段落</p>
                <a href={'www.it666.com'}>我是home超鏈接</a>
            </StyleDiv>
        )
    }
}
export default Home;

5. styled-components
5.1 styled-components特性之- props(回調(diào)函數(shù))和- attrs

import React from 'react';
//1.導(dǎo)入style-components庫
import styled from 'styled-components';
//2.通過回調(diào)函數(shù)調(diào)用props里頭的數(shù)據(jù)
// 通過回調(diào)函數(shù)調(diào)用attrs設(shè)置樣式
const StyleDiv = styled.div`
    p{
        font-size: 50px;
        color: ${props => props.color};
    }
`;
const StyleInput = styled.input.attrs({
    type:'password'
})``
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            color: 'red'
        }
    }
    render() {
        return (
            <StyleDiv color={this.state.color}>
                <p>我是home段落</p>
                <a href={'www.it666.com'}>我是home超鏈接</a>
                <button onClick={()=>{this.btnClick()}}>按鈕</button>
                <StyleInput></StyleInput>
            </StyleDiv>
        )
    }
    btnClick(){
        this.setState({
            color: 'green'
        })
    }
}
export default Home;

5.2 如何通過style-components統(tǒng)一設(shè)置樣式——ThemeProvider

// 在App.js引入ThemeProvider
import { ThemeProvider } from 'styled-components';

<!--通過需要應(yīng)用樣式的組件用ThemeProvider包裹-->
 <ThemeProvider theme={{size:'100px',color:'green'}}>
          <Header/>
          <Header name={"sjl"} age={20}></Header>
 </ThemeProvider>

高階組件會自動將其ThemeProvider提供的數(shù)據(jù)保存到子代的props

import React from 'react'
import ReactTypes from 'prop-types'
import styled from 'styled-components'
const StyleDiv1 = styled.div`
  p{
    color:${props=>props.theme.color};
    font-size:${props=>props.theme.size}
  }
`
function Header(props) {
  console.log(props)
  return (
    <div>
      <div className={'header'}>我是頭部</div>
    <StyleDiv1>我的世界</StyleDiv1>
    </div>
  )
}
export default Header;

5.3 style-components的繼承關(guān)系

import React from 'react';
import styled from 'styled-components'
/* const StyleDiv1 = styled.div`
  font-size: 100px;
  color: red;
  background: blue;
`;
const StyleDiv2 = styled.div`
  font-size: 100px;
  color: green;
  background: blue;
`; */
const BaseDiv = styled.div`
  font-size: 100px;
  background: blue;
`;
const StyleDiv1 = styled(BaseDiv)`
  color: red;
`;
const StyleDiv2 = styled(BaseDiv)`
  color: green;
`;
class App extends React.Component{
    render(){
        return (
            <div>
                <StyleDiv1>我是div1</StyleDiv1>
                <StyleDiv2>我是div2</StyleDiv2>
            </div>
        );
    }
}
export default App;