React中的JSX語法，讓HTML更好地融入了JS中；而styled-components技術(shù)庫，則實(shí)現(xiàn)了讓CSS更好地融入JS。

優(yōu)點(diǎn)

• 無類名錯誤：
  styled-components 會自動生產(chǎn)類名，防止手動輸入造成的錯誤。

• 更容易刪除：
  CSS很難知道類名是否在您的代碼庫中的某處使用。styled-components 讓它變得顯而易見，因?yàn)槊恳粋€樣式都與特定的組件相關(guān)聯(lián)。如果組件未使用（工具可以檢測到）并被刪除，則其所有樣式都會隨之刪除。

• 操作動態(tài)樣式更簡單：
  根據(jù)組件的 props 或全局主題調(diào)整組件的樣式簡單直觀，無需手動管理數(shù)十個類。

• 輕松維護(hù)：
  避免了在不同文件中尋找影響組件的樣式這類問題，因此無論代碼庫有多大，樣式維護(hù)都是小菜一碟。

基本使用方式：

1. 安裝庫
   yarn add styled-components -D;
2. 引用
   在需要創(chuàng)建樣式組件的地方引入
   import styled from 'styled-components'
3. 創(chuàng)建樣式組件
   以下操作創(chuàng)建了一個標(biāo)簽名為Box的div組件，其寬度高度均為50px

const Box = styled.div`
  height:50px;
  width:50px;
`

4.使用樣式組件
可以在當(dāng)前頁面中直接使用；或者通過暴露和引入在其他組件中使用
<Box>Hello Word</Box>

更多功能

1. 樣式組件的子組件(推薦使用)
   可以在定義樣式時，同時定義它的子組件。

const Box = styled.div`
  height:50px;
  width:50px;
`
Box.item = style.div`
   height:20px;
   width:20px;
`

這樣就定義除了一個Box的子組件，在引入了Box組件的地方可以直接使用，不需要再次引入

<Box>
  Hello Word
  <Box.item>
    你好！
  </Box.item>
</Box>

2. 在定義樣式組件時，可以通過&連接選擇器，來定義該組件下的子組件的樣式：

const Box = styled.div`
  height:50px;
  width:50px;
  & span {
    font-weight:700;
    color:#bfa;
  }
`

其中的選擇器依然可以用標(biāo)簽名、偽類、類名來定義（例子中用的就是 標(biāo)簽名）

3.使用props參數(shù)動態(tài)設(shè)置css
可以在標(biāo)簽中傳入?yún)?shù)，通過props接收
<Box size='24px'>Hello Word</Box>

const Box = styled.div`
  height:50px;
  width:50px;
  font-size: ${props=>props.size}
`

4. 通過標(biāo)簽屬性自動改變樣式
   可以在標(biāo)簽中傳入?yún)?shù)，通過props接收
   <Box disabled={true}>Hello Word</Box>

const Box = styled.div`
  height:50px;
  width:50px;
  ${props=>porps.disabled && css`
    color：red;
    cursor: not-allowed
  `}
`

本例子意為：當(dāng)Box標(biāo)簽的disabled屬性為true時，將其變?yōu)榧t色，光標(biāo)改為不可用圖標(biāo)。
其中css是另外一個styled-components提供的模板字符串函數(shù)，也需要在文件開頭引入
import {css} from 'styled-components

5. 樣式組件的繼承

const Box2 = styled(Box)`
  background-color:#bfa;
`

如此Box2就可以繼承Box1的屬性，并可以定義新的屬性覆蓋繼承值。

6. 全局樣式
   定義一個全局的jsx文件 格式如下：

import {createGlobalStyle} from 'style-components'
export const GlobalStyle = createGlobalStyle`
  *{
    margin:0;
    padding:0;
  }
  .debug-r{ 
    outline: 2px solid #f00;
  }
`

在入口頁引入或直接放在入口頁，之后將全局樣式組件放在入口文件的返回值中

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <GlobalStyle />
    <App />
  </React.StrictMode>
)

行文較為粗獷，如有錯誤，歡迎反饋！