react教程，css-in-js框架styled-components如何使用？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

为了更好的理解什么是css-in-js技术，苏南大叔这里举例一个react的框架styled-components。通过这个框架的使用，来理解一下，到底什么是css-in-js技术。基于本文的代码，就可以创建一个react专用的css框架了。

苏南大叔的平行空间笔记本博客，记录苏南大叔和计算机代码的故事。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。css-in-js的好处是：样式作用域局限于组件内部而不是全局，避免了组件之间样式互相影响。

styled-components

官方文档：

• https://styled-components.com/
• https://github.com/styled-components/styled-components

这个代码使用起来就像是编写一个css版本的react函数组件。先定义一个个react组件替代jsx的标签。比如下面的这两个表述等价，前者为正常的react表述，后者为css-in-js的表述：

<div className='btn'>aa</div>

<myBtn>aa</myBtn>

后者myBtn是解释为div还是button。这个完全看自己的代码演绎了。这里定义的是标签（react组件）和css之间的关系。一个styled-components标签演绎为最终什么样的真实标签，也是这里来演绎的。另外需要特殊说明的是：每条规则对应的都是个react组件。所以，首字母请大写！（这也是很多第三方类库首字母大小的原因）

定义方式一【推荐】

import styled from 'styled-components';
export const Sunan1 = styled.div`
   width:120px;
   height:36px;
   background-color: red;
   margin-bottom: 2px;
   span {
       font-size: 12px;
   }
`;

注意看，这个css写法和原始的css写法一致，而且是还包括scss的这种css嵌套的写法。

定义方式二

import styled from 'styled-components';
export const Sunan2 = styled.div({
  width: '120px',
  height: '36px',
  backgroundColor: 'red',
  marginBottom: '2px',
  span: {
    fontSize: '12px',
  }
});

这个方式里面，写法比较接近react写css的方式，但是和原始的css写法相差较大。注意看span:后面的“冒号”。

css条目覆盖

这里以苏南大叔比较喜欢的第一种写法为例子。说明这种的css还支持个别条目覆盖。

export const Sunan3 = styled(Sunan2)`
  span {
    font-size: 14px;
    color:black;
  }
`;

props传递参数

export const Sunan4 = styled(Sunan3)`
  background-color: ${props => props.bgcolor ? props.bgcolor : "blue"};
  span {
    font-size: ${props => props.size || '16px'};
  }
`;
export const Sunan5 = styled(Sunan3)({
  backgroundColor: props => props.bgcolor ? props.bgcolor : "blue",
  span: {
    fontSize: props => props.size || '18px',
  }
})

传参数的时候，都是正常使用组件：

<Sunan4 bgcolor="spanink" size="16px" />

测试代码

App.js:

import React, { Component } from 'react'
import { Sunan1, Sunan2, Sunan3, Sunan4, Sunan5 } from './SunanStyle'
export default class Home extends Component {
  render() {
    return (
      <div>
        < Sunan1>
          <span>sunan大叔1</span>
        </ Sunan1>
        < Sunan2>
          <span>sunan大叔2</span>
        </ Sunan2>
        < Sunan3>
          <span>sunan大叔3</span>
        </ Sunan3>
        < Sunan4 bgcolor="spanink" size="16px">
          <span>sunan大叔4</span>
        </ Sunan4>
        < Sunan5 bgcolor="yellow" size="18px">
          <span>sunan大叔5</span>
        </ Sunan5>
      </div>
    )
  }
}

SunanStyle.js:

import styled from 'styled-components';
export const Sunan1 = styled.div`
   width:120px;
   height:36px;
   background-color: red;
   margin-bottom: 2px;
   span {
       font-size: 12px;
   }
`;
export const Sunan2 = styled.div({
  width: '120px',
  height: '36px',
  backgroundColor: 'red',
  marginBottom: '2px',
  span: {
    fontSize: '12px',
  }
});
export const Sunan3 = styled(Sunan2)`
  span {
    font-size: 14px;
    color:black;
  }
`;
export const Sunan4 = styled(Sunan3)`
  background-color: ${props => props.bgcolor ? props.bgcolor : "blue"};
  span {
    font-size: ${props => props.size || '16px'};
  }
`;
export const Sunan5 = styled(Sunan3)({
  backgroundColor: props => props.bgcolor ? props.bgcolor : "blue",
  span: {
    fontSize: props => props.size || '18px',
  }
})

结束语

更多react相关经验文字，请点击：

• https://seosn.com/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。