React中编程css的更好实现：styled-components

React中的JSX语法，让HTML更好地融入了JS中；而styled-components技术库，则实现了让CSS更好地融入JS。

优点

• 无类名错误：
  styled-components 会自动生产类名，防止手动输入造成的错误。

• 更容易删除：
  CSS很难知道类名是否在您的代码库中的某处使用。styled-components 让它变得显而易见，因为每一个样式都与特定的组件相关联。如果组件未使用（工具可以检测到）并被删除，则其所有样式都会随之删除。

• 操作动态样式更简单：
  根据组件的 props 或全局主题调整组件的样式简单直观，无需手动管理数十个类。

• 轻松维护：
  避免了在不同文件中寻找影响组件的样式这类问题，因此无论代码库有多大，样式维护都是小菜一碟。

基本使用方式：

1. 安装库
   yarn add styled-components -D;
2. 引用
   在需要创建样式组件的地方引入
   import styled from 'styled-components'
3. 创建样式组件
   以下操作创建了一个标签名为Box的div组件，其宽度高度均为50px

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

4.使用样式组件
可以在当前页面中直接使用；或者通过暴露和引入在其他组件中使用
<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;
  }
`

其中的选择器依然可以用标签名、伪类、类名来定义（例子中用的就是 标签名）

3.使用props参数动态设置css
可以在标签中传入参数，通过props接收
<Box size='24px'>Hello Word</Box>

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

4. 通过标签属性自动改变样式
   可以在标签中传入参数，通过props接收
   <Box disabled={true}>Hello Word</Box>

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

本例子意为：当Box标签的disabled属性为true时，将其变为红色，光标改为不可用图标。
其中css是另外一个styled-components提供的模板字符串函数，也需要在文件开头引入
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>
)

行文较为粗犷，如有错误，欢迎反馈！