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

更多功能

  1. 样式组件的子组件(推荐使用)
    可以在定义样式时,同时定义它的子组件。
const Box = styled.div`
  height:50px;
  width:50px;
`
Box.item = style.div`
   height:20px;
   width:20px;
`

这样就定义除了一个Box的子组件,在引入了Box组件的地方可以直接使用,不需要再次引入


  Hello Word
  
    你好!
  

  1. 在定义样式组件时,可以通过&连接选择器,来定义该组件下的子组件的样式:
const Box = styled.div`
  height:50px;
  width:50px;
  & span {
    font-weight:700;
    color:#bfa;
  }
`

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

3.使用props参数动态设置css
可以在标签中传入参数,通过props接收
Hello Word

const Box = styled.div`
  height:50px;
  width:50px;
  font-size: ${props=>props.size}
`
  1. 通过标签属性自动改变样式
    可以在标签中传入参数,通过props接收
    Hello Word
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中编程css的更好实现:styled-components)