React中编程css的更好实现：styled-components | 青训营笔记

少辰6
70 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第5天 。

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>
  1. 在定义样式组件时，可以通过&连接选择器，来定义该组件下的子组件的样式：
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}
`
  1. 通过标签属性自动改变样式 可以在标签中传入参数，通过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

  1. 样式组件的继承
const Box2 = styled(Box)`
  background-color:#bfa;
`

如此Box2就可以继承Box1的属性，并可以定义新的属性覆盖继承值。

  1. 全局样式 定义一个全局的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>
)

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

avatar
文章
阅读
粉丝