Styled-Component

Styled-Component

Styled Components 是一个使用CSS-in-JS技术实现的样式组件库，它是一个为React和React Native设计的库。它允许我们在应用中使用JavaScript和CSS混合起来编写样式级组件。并且它是支持Sass的，不需要添加任何库。

1. Styled Component的几大优势：

（1）Scoped Style(范围限定的样式)

不用担心引用的css文件被其他人修改

（2）CSS in JS

可以在JS中使用component内部变量做条件判断

const Button = styled.button` /* Adapt the colors based on primary prop */ background: ${props => props.primary ? "palevioletred" : "white"}; color: ${props => props.primary ? "white" : "palevioletred"}; `; <Button primary>Normal</Button>

• 1
• 2
• 3
• 4
• 5
• 6

（3）可移植性

没有了css，所有样式都在组件内部，方便移植到其他平台，如React Native。

（4）没有了样式命名的冲突

没有class name的冲突，适用于微前端架构。 因为微前端的一大问题就是不用sub app之间可能定义了相同名称的样式。 而style component的class name是通过hash算法得出的，不会冲突。

（5）便于对样式做unit test

通过style-components团队提供的组件
npm install --dev jest-styled-components
我们可以进行如下的单元测试

import React from 'react' import styled from 'styled-components' import renderer from 'react-test-renderer' import 'jest-styled-components' const Button = styled.button` color: red; ` test('it works', () => { const tree = renderer.create(<Button />).toJSON() expect(tree).toMatchSnapshot() })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

2. 基本使用

（1）安装

npm install styled-components --save

• 1

（2）引入库

import styled from "styled-components";

• 1

（3）定义样式组件

这里就定义了一个样式组件Title，可以看到，它的实现还是非常简单的，语法就是：styled.标签名，后面跟一个模板字符串，其内容就是组件的样式属性。这样就创建了一个带样式的React组件。

import React from "react"; import styled from "styled-components"; const Title = styled.h1` font-size: 20px; text-align: center; color: red; `; export default function App() { return <Title>Hello World</Title>; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

2. 样式嵌套

在styled-components中也可以使用css选择器、伪元素、媒体查询以及各类的声明样式。
标签名选择器、类选择器、伪类和伪元素跟css中是一样的

import React from "react"; import styled from "styled-components"; const Title = styled.div` text-align: center; img { height: 100px; width: 200px; } p { font-size: 20px; color: red; } `; export default function App({imgUrl}) { return ( <Title> <p>Hello World</p> <img src={imgURl} alt="" /> </Title> ); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

3. 创建全局样式

使用createGlobalStyle可以创建全局样式，引入进App.js中

import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` * { margin: 0; padding: 0; box-sizing: border-box; // background: pink } `

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

4. 样式嵌套

import React from "react"; import styled from "styled-components"; const Title = styled.div` text-align: center; img { height: 100px; width: 200px; } p { font-size: 20px; color: red; } `; export default function App({imgUrl}) { return ( <Title> <p>Hello World</p> <img src={imgURl} alt="" /> </Title> ); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

5. 组件传参

import React from "react"; import styled from "styled-components"; const Title = styled.div` text-align: center; img { height: 100px; width: 200px; } p { font-size: 20px; color: ${props => props.color}; } `; export default function App({imgUrl, themeColor}) { return ( <Title> <p color={themeColor}>Hello World</p> <img src={imgURl} alt="" /> </Title> ); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

这样就实现了动态改变文字的颜色。

6.样式组件的继承

我们还可以使用其他组件的样式，并继承它们所有的样式（如果有相同的样式，则会覆盖继承来的样式），只需将其包装在styled（）构造函数中，来看例子：

const BoringButton = styled.button` color: blue; background-color: green； `; const CoolButton = styled(BoringButton)` color: pink; `;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

这样，下面的组件就获得了上面组件的样式，并覆盖了重复了样式color。

7. 使用css辅助函数（公共样式）

如果我们需要在多个样式组件中使用通用的样式，css辅助函数就派上用场了，来看看css辅助函数是如何使用的：

import React from "react"; import styled, {css} from "styled-components"; const commonStyle = css` color: white; font-size: 20px; `; const Button = styled.button` ${commonStyle}; background-color: red; `; const AnotherButton = styled.button` ${commonStyle}; background-color: green; `;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

这里定义的commonStyle在两个button组件中使用时，不会有自己单独的类，而是会添加到这两个button组件对应的类中。

8. as多态属性

as可用于更改样式组件的标签类型（如将div转为button，button转为a标签等）, 也可传递自定义组件。

export const Button = styled.button` // background-color: blue; ` export const NewButton = styled.button` background-color: yellow; `

• 1
• 2
• 3
• 4
• 5
• 6

<Button>我是一个按钮</Button> <Button as='a' href="https://cvma.test.cmbchina.cn/CVM/console/SystemConsoleV2.aspx?IsBizSite=0" target='_blank'>我是使用as修改后的按钮</Button> <Button as={NewButton}>我是一个新按钮</Button>

• 1
• 2
• 3

9. attrs

attrs 一种添加属性的方式。注：只能添加原生标签默认属性，不可自定义属性。

export const Input = styled.input.attrs({ type: 'text', length: (props: string | any[]) => props.length || 10 })` background: palevioletred; border-radius: 3px; border: none; color: white; padding: ${(props: { padding: any; }) => props.padding} `; export const PasswordInput = styled(Input).attrs({ type: 'password', })` background: #8a8a8a; length: 300px `

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

<Input length="20" padding="10px"></Input> <PasswordInput></PasswordInput>

• 1
• 2