21 【styled-components的使用】

#userConten .userBtn button{font-size: 18px;
}

npm install --save styled-components
yarn add styled-components

{"resolutions": {"styled-components": "^5"}
}

const Component = window.styled.div`color: red;
`

import styled from 'styled-components'/*
创建一个Title组件，
将render一个带有样式的h1标签
*/
const Title = styled.h1`font-size: 1.5em;text-align: center;color: palevioletred;
`;/*
创建一个Wrapper组件，
将render一个带有样式的section标签
*/
const Wrapper = styled.section`padding: 4em;background: papayawhip;
`;// 使用 Title and Wrapper 得到下面效果图
render(
);

const Button = styled.button`background: ${props => props.primary ? "palevioletred" : "white"};color: ${props => props.primary ? "white" : "palevioletred"};font-size: 1em;margin: 1em;padding: 0.25em 1em;border: 2px solid palevioletred;border-radius: 3px;
`;render(
NormalPrimary
);

// 上一节创建的没有插值的 Button 组件
const Button = styled.button`color: palevioletred;font-size: 1em;margin: 1em;padding: 0.25em 1em;border: 2px solid palevioletred;border-radius: 3px;
`;// 一个继承 Button 的新组件, 重载了一部分样式
const TomatoButton = styled(Button)`color: tomato;border-color: tomato;
`;render(
Normal ButtonTomato Button
);

const Button = styled.button`display: inline-block;color: palevioletred;font-size: 1em;margin: 1em;padding: 0.25em 1em;border: 2px solid palevioletred;border-radius: 3px;
`;const TomatoButton = styled(Button)`color: tomato;border-color: tomato;
`;render(
Normal ButtonLink with Button stylesLink with Tomato Button styles
);

const Button = styled.button`display: inline-block;color: palevioletred;font-size: 1em;margin: 1em;padding: 0.25em 1em;border: 2px solid palevioletred;border-radius: 3px;
`;const ReversedButton = props => render(
Normal ButtonCustom Button with Normal Button styles

比如: styled("div"),styled.tagname的方式就是 styled(tagname)`的别名.

7.条件渲染

styled-components最核心的一点，我个人认为也是这一点，让styled-components变得如此火热，我们直接先看下代码：

字符串前面那个css可加可不加，不加也是能够正常进行渲染的，但是还是推荐加，如果你不加的话在编辑器中就会失去提示的功能，编辑器会把它当作字符串而不是CSS样式。

import { useState } from "react";
import styled, { css } from "styled-components";const Box = styled.div`${(props) =>props?.small? css`width: 100px;height: 100px;`: css`width: 200px;height: 200px;`}background-color: red;
`;export default function App() {const [small, setSmall] = useState(true);return (
 setSmall(!small)}>切换
);
}

可以看到，使用styled-components编写组件样式的过程会变得异常的简单，如果你用的是CSS，那么你是无法通过React的Props进行更改CSS中的属性，你只能通过Props动态更改dom上绑定的类名，就如同下面的代码一样。

import { useState } from "react";
import "./styles.css";export default function App() {const [small, setSmall] = useState(true);return (
 setSmall(!small)}>切换
);
}

这样看起来styled-components没有什么特别的，甚至上面的写法还比较麻烦？其实styled-components的威力不止于此，我们看一下下面的例子：

import { useState } from "react";
import styled, { css } from "styled-components";const Box = styled.div`${(props) => css`width: ${props?.size}px;height: ${props?.size}px;`}background-color: red;
`;export default function App() {const [size, setSize] = useState(100);return (
 setSize(size + 2)}>变大
);
}

渲染如下：

如果是通过CSS属性就非常难以实现这种效果，只有靠React官方提供的style-in-js方案，直接编写行内属性：

import { useState } from "react";export default function App() {const [size, setSize] = useState(100);return (
{ width: size, height: size, backgroundColor: "red" }} /> setSize(size + 2)}>变大
);
}

8.普通样式

如果使用过Vue的同学应该很清楚，在.vue文件中有个style标签，你只需要加上了scoped就可以进行样式隔离，而styled-components其实完全具有Vue的style标签的能力，你只需要在最外面包一层，然后就可以实现Vue中样式隔离的效果。

import styled from "styled-components";const AppStyle = styled.div`.box {width: 100px;height: 100px;background-color: red;}
`;export default function App() {return (
);
}

甚至还可以配合上面的条件渲染进行使用，也非常的方便：

import { useState } from "react";
import styled, { css } from "styled-components";const AppStyle = styled.div`${({ change }) =>change? css`.box {width: 200px;height: 200px;background-color: blue;}`: css`.box {width: 100px;height: 100px;background-color: red;}`}
`;export default function App() {const [change, setChange] = useState(false);return (
 {setChange(true);}}>更换);
}

渲染效果如下图所示：

9.attrs

为了避免仅为传递一些props来渲染组件或元素而使用不必要的wrapper, 可以使用 .attrs constructor. 通过它可以添加额外的 props 或 attributes 到组件.

在一些HTML标签中是有一些属性的，比如input标签中，有type这个属性，我们就可以使用attrs给上一个默认值，还可以实现不传对应的属性则给一个默认值，如果传入对应的属性则使用传入的那个属性值。

import styled from "styled-components";const Input = styled.input.attrs((props) => ({// 直接指定一个值type: "text",// 给定一个默认值，可以传入Props进行修改size: props.size || "1em"
}))`color: palevioletred;font-size: 1em;border: 2px solid palevioletred;border-radius: 3px;margin: ${(props) => props.size};padding: ${(props) => props.size};
`;export default function App() {return (

);
}

渲染效果：

如果有延伸的话，接收是延伸后的属性：

const Input = styled.input.attrs((props) => ({type: "text",size: props.size || "1em"
}))`border: 2px solid palevioletred;margin: ${(props) => props.size};padding: ${(props) => props.size};
`;// 有延伸的话，以延伸后的组件中的属性为准
const PasswordInput = styled(Input).attrs({type: "password"
})`border: 2px solid aqua;
`;export default function App() {return (

);
}

最后渲染结果：

10.动画

虽然使用@keyframes的 CSS 动画不限于单个组件,但我们仍希望它们不是全局的(以避免冲突). 这就是为什么 styled-components 导出 keyframes helper 的原因: 它将生成一个可以在 APP 应用的唯一实例。

动画需要使用keyframes进行声明，如下所示：

import styled, { keyframes } from "styled-components";// 通过keyframes创建动画
const rotate = keyframes`from {transform: rotate(0deg);}to {transform: rotate(360deg);}
`;// 创建动画的组件
const Rotate = styled.span`display: inline-block;animation: ${rotate} 2s linear infinite;padding: 2rem 1rem;font-size: 1.2rem;
`;export default function App() {return (
<    >
);
}

渲染结果：

11.Coming from CSS

11.1 styled-components 如何在组件中工作?

styled-components 如何在组件中工作?

如果你熟悉在组件中导入 CSS(例如 CSSModules),那么下面的写法你一定不陌生:

import React from 'react'
import styles from './styles.css'export default class Counter extends React.Component {state = { count: 0 }increment = () => this.setState({ count: this.state.count + 1 })decrement = () => this.setState({ count: this.state.count - 1 })render() {return (
{this.state.count}
+-
)}
}

由于 Styled Component 是 HTML 元素和作用在元素上的样式规则的组合, 我们可以这样编写Counter:

import React from 'react'
import styled from 'styled-components'const StyledCounter = styled.div`/* ... */
`
const Paragraph = styled.p`/* ... */
`
const Button = styled.button`/* ... */
`export default class Counter extends React.Component {state = { count: 0 }increment = () => this.setState({ count: this.state.count + 1 })decrement = () => this.setState({ count: this.state.count - 1 })render() {return ({this.state.count}+-)}
}

注意,我们在StyledCounter添加了"Styled"前缀,这样组件Counter 和StyledCounter 不会明明冲突,而且可以在 React Developer Tools 和 Web Inspector 中轻松识别.

11.2 使用伪元素、选择器、嵌套语法

由于 styled-components 采用 stylis 作为预处理器，因此提供了对伪元素、伪选择器以及嵌套写法的支持（跟 Les 很类似）。其中，& 指向组件本身：

const Thing = styled.div`color: blue;
`

伪元素和伪类无需进一步细化,而是自动附加到了组件:

const Thing = styled.button`color: blue;::before {content: '🚀';}:hover {color: red;}
`render(Hello world!
)

对于更复杂的选择器,可以使用与号(&)来指向主组件.以下是一些示例:

const ScDiv = styled.div`color: blue;&:hover {color: red; // 被 hover 时的样式}& ~ & {background: tomato; // ScDiv 作为 ScDiv 的 sibling}& + & {background: lime; // 与 ScDiv 相邻的 ScDiv}&.something {background: orange; // 带有 class .something 的 ScDiv}.something-child & {border: 1px solid; // 不带有 & 时指向子元素，因此这里表示在带有 class .something-child 之内的 ScDiv
`;render(Hello world!How ya doing?The sun is shining...Pretty nice day today.Don't you think?
Splendid.
)
复制代码

渲染的结果如图所示：

如果只写选择器而不带&,则指向组件的子节点.

const Thing = styled.div`color: blue;.something {border: 1px solid; // an element labeled ".something" inside display: block;}
`render(Mystery buttonWhat do I do?
)

最后,&可以用于增加组件的差异性;在处理混用 styled-components 和纯 CSS 导致的样式冲突时这将会非常有用:

const Thing = styled.div`&& {color: blue;}
`const GlobalStyle = createGlobalStyle`div${Thing} {color: red;}
`render(I'm blue, da ba dee da ba daa
)

12.媒体查询

开发响应式 web app 时媒体查询是不可或缺的工具.

以下是一个非常简单的示例,展示了当屏宽小于700px时,组件如何改变背景色:

const Content = styled.div`background: papayawhip;height: 3em;width: 3em;@media (max-width: 700px) {background: palevioletred;}
`;render(
);

由于媒体查询很长,并且常常在应用中重复出现,因此有必要为其创建模板.

由于 JavaScript 的函数式特性,我们可以轻松的定义自己的标记模板字符串用于包装媒体查询中的样式.我们重写一下上个例子来试试:

const sizes = {desktop: 992,tablet: 768,phone: 576,
}// Iterate through the sizes and create a media template
const media = Object.keys(sizes).reduce((acc, label) => {acc[label] = (...args) => css`@media (max-width: ${sizes[label] / 16}em) {${css(...args)}}`return acc
}, {})const Content = styled.div`height: 3em;width: 3em;background: papayawhip;/* Now we have our methods on media and can use them instead of raw queries */${media.desktop`background: dodgerblue;`}${media.tablet`background: mediumseagreen;`}${media.phone`background: palevioletred;`}
`;render(
);

13.重用

as - 转变组件类型，比如将一个div转变为button

const Component = styled.div`color: red;
`;render( alert('It works!')}>Hello World!
)

export default () => {return (// as(可以是组件名,也可以是普通标签名): 表示要渲染出来的标签或组件// 这个例子表示: 继承了 ScExtendedButton 样式的 a 标签Extends Link with Button styles)
}

14.样式化任意组件

14.1 样式化组件

const Link = ({ className, children }) => (// className 属性附加到 DOM 元素上{children}
)const StyledLink = styled(Link)`color: red;font-weight: bold;
`render(
Unstyled LinkStyled Link
)

14.2 样式化第三方组件

import { Button } from 'antd'const ScButton = styled(Button)`margin-top: 12px;color: green;
`render(
Styled Fusion Button
)

15.主题切换

15.1 基本使用

styled-components 通过导出 组件从而能支持主题切换。 是基于 React 的 Context API 实现的，可以为其下面的所有 React 组件提供一个主题。在渲染树中，任何层次的所有样式组件都可以访问提供的主题。例如：

import styled, {ThemeProvider} from "styled-components";// 通过使用 props.theme 可以访问到 ThemeProvider 传递下来的对象
const Button = styled.button`font-size: 1em;margin: 1em;padding: 0.25em 1em;border-radius: 3px;color: ${props => props.theme.main};border: 2px solid ${props => props.theme.main};
`;// 为 Button 指定默认的主题
Button.defaultProps = {theme: {main: "palevioletred"}
}const theme = {main: "mediumseagreen"
};render(
Normal// 采用了 ThemeProvider 提供的主题的 ButtonThemed
);
复制代码

15.2 函数主题

ThemeProvider 的 theme除了可以接受对象之外，还可以接受函数。函数的参数是父级的 theme对象。此外，还可以通过使用 theme prop 来处理 ThemeProvider 未定义的情况（这跟上面的 defaultProps是一样的效果），或覆盖 ThemeProvider的 theme。例如：

const ScButton = styled.button`color: ${props => props.theme.fg};border: 2px solid ${props => props.theme.fg};background: ${props => props.theme.bg};
`;const theme = {fg: "palevioletred",bg: "white"
};const invertTheme = ({ fg, bg }) => ({fg: bg,bg: fg
});render(// ThemeProvider 未定义的情况{fg: 'red',bg: 'white'}}>Default Theme
Default Theme// theme 接收的是一个函数，函数的参数是父级的 themeInverted Theme// 覆盖 ThemeProvider的 theme{fg: 'red',bg: 'white'}}>Override Theme
);

15.3 在 styled-components 外使用主题

如果需要在styled-components外使用主题,可以使用高阶组件withTheme:

import { withTheme } from 'styled-components'class MyComponent extends React.Component {render() {console.log('Current theme: ', this.props.theme)// ...}
}export default withTheme(MyComponent)

通过useContext React hook

使用React Hooks时，还可以使用useContext访问样式化组件之外的当前主题。

import { useContext } from 'react'
import { ThemeContext } from 'styled-components'const MyComponent = () => {const themeContext = useContext(ThemeContext)console.log('Current theme: ', themeContext)// ...
}

通过useTheme自定义挂钩

使用React Hooks时，您还可以使用useTheme访问样式组件之外的当前主题。

import { useTheme } from 'styled-components'const MyComponent = () => {const theme = useTheme()console.log('Current theme: ', theme)// ...
}

15.4 theme prop

主题可以通过theme prop传递给组件.通过使用theme prop可以绕过或重写ThemeProvider所提供的主题.

// Define our button
const Button = styled.button`font-size: 1em;margin: 1em;padding: 0.25em 1em;border-radius: 3px;/* Color the border and text with theme.main */color: ${props => props.theme.main};border: 2px solid ${props => props.theme.main};
`;// Define what main theme will look like
const theme = {main: "mediumseagreen"
};render(
{ main: "royalblue" }}>Ad hoc theme
Themed{ main: "darkorange" }}>Overridden
);

16.Refs

通过传递ref prop给 styled component 将获得:

• 底层 DOM 节点 (如果 styled 的对象是基本元素如 div)
• React 组件实例 (如果 styled 的对象是 React Component)

const Input = styled.input`padding: 0.5em;margin: 0.5em;color: palevioletred;background: papayawhip;border: none;border-radius: 3px;
`;class Form extends React.Component {constructor(props) {super(props);this.inputRef = React.createRef();}render() {return ( {this.inputRef.current.focus()}}/>);}
}render(

);

注意

v3 或更低的版本请使用 innerRef prop instead.

17.样式对象

styled-components 支持将 CSS 写成 JavaScript 对象.对于已存在的样式对象,可以很轻松的将其迁移到 styled-components.

// Static object
const Box = styled.div({background: 'palevioletred',height: '50px',width: '50px'
});// Adapting based on props
const PropsBox = styled.div(props => ({background: props.background,height: '50px',width: '50px'
}));render(

);

18.CSS Prop实现内联样式

避免创建新的组件，直接应用样式，需要用到 styled-components 提供的 babel-plugin: styled-components.com/docs/toolin…

 props.theme.colors.text};`}
/>

参考：https://styled-components.com/docs/tooling#babel-plugin

19.mixin

import styled, { css } from 'styled-components';
import { Button as FusionButton } from 'antd';const mixinCommonCSS = css`margin-top: 12px;border: 1px solid grey;borde-radius: 4px;
`;const ScButton = styled.button`${mixinCommonCSS}color: yellow;
`;const ScFusionButton = styled(FusionButton)`${mixinCommonCSS}color: blue;
`;

20.性能问题

Styled-Components 定义的组件一定要放在组件函数定义之外（对于 Class 类型的组件，不要放在 render 方法内 ）。因为在 react 组件的 render 方法中声明样式化的组件，会导致每次渲染都会创建一个新组建。 这意味着 React 将不得不在每个后续渲染中丢弃并重新计算 DOM 子树的那部分，而不是仅仅计算它们之间变化的差异，从而导致性能瓶颈和不可预测的行为。

// ❌ 绝对不要这样写
const Header = () => {const Title = styled.h1`font-size: 10px;`return (