styled-components使用

2022-02-16

styled-components是一个常用的 css in js 类库，和所有同类型的类库一样，通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。公司的前端项目基本都用到了这样的样式化组件，这里我对基本使用做个总结。

一、安装/引入

1 2	npm install styled-components yarn add styled-components

新建styled.js, 引入styled-components

1	import styled from 'styled-components'

二、定义

1.基本使用(类似sass写法)：

export const Box = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    > div {
        > span {
            cursor: pointer;
        }
    }
`;

2.传递props：

1	color: ${(props) => (props.isActive ? 'white' : 'black')};

在页面中引入组件并在标签中定义isActive属性

3.引入图片：

1	import chartImg from 'src/assets/images/chart.png';

1	background-image: url(${chartImg});

4.可以写媒体查询：

1
2
3

@media screen and (max-width: 1200px) {
    color: black;
  }

5.扩展现有的样式化组件：

const Button = styled.button`
  color: black;
  //...
`
 
const WhiteButton = Button.extend`
  color: white;
`

6.修改antd组件样式

import { Button } from 'antd';
 
const NewButton = styled(Button)`
    color: black;
`;

三、vscode扩展

使用vscode-styled-components插件，可以提供语法高亮和智能提示。