参考链接：animations

我们可以在某个样式组件中使用 @keyframes 来定义动画帧，来避免全局冲突。

import { keyframes } from 'styled-components';

const rotate = keyframes`

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

`;

const StyledRotate = styled.div`

display: inline-block;

animation: ${rotate} 2s linear infinite;

padding: 2rem 1rem;

font-size: 1.2rem;

`;

export function App() {

return (

<StyledRotate>&lt; 💅🏾 &gt;</StyledRotate>

);

}

使用 styled-components 导出的 keyframes 函数创建一个 keyframes 实例对象，然后在想要定义动画的地方引用即可。

styled-components 的高级用法

主题功能支持

参考链接: theming

类似 antd 组件库的主题功能，styled-components 可通过 ThemeProvider 组件的 context API 上下文 API 为所有的子孙组件提供主题参数。

以设置主题色为例：

import { useState } from 'react';

import styled, { ThemeProvider } from 'styled-components';

import StyledBaseButton from '@/components/StyledBaseButton';

interface ThemeProps {

color: string;

background: string;

border?: string;

};

const StyledContent = styled.div<{theme: ThemeProps}>`

color: ${props => props.theme.color};

background: ${props => props.theme.background};

border: ${props => props.theme.border || 'none'};

`;

const primaryTheme = { color: '#fff', background: 'blue', border: 'none' };

const defaultTheme = { color: '#333', background: '#fff', border: '1px solid #eee' };

function Content() {

const [themeName, setThemeName] = useState('default');

return (

<ThemeProvider theme={themeName === 'default' ? defaultTheme : primaryTheme}>

<StyledBaseButton onClick={

setThemeName(themeName === 'default' ? 'primary' : 'default')

}>

切换主题

</StyledBaseButton>

<StyledContent>这是一段内容</StyledContent>

</ThemeProvider>

)

}

ThemeProvider 支持嵌套，嵌套 ThemeProvider 的 theme 属性可以是一个函数，这个函数的入参可以接收父级 ThemeProvider 的 theme 上下文参数。

import styled, { ThemeProvider } from 'styled-components';

import StyledBaseButton from '@/components/StyledBaseButton';

const StyledContent = styled.div<{theme: ThemeProps}>`

color: ${props => props.theme.color};

background: ${props => props.theme.background};

border: ${props => props.theme.border || 'none'};

`;

const defaultTheme = { color: '#333', background: '#fff', border: '1px solid #eee' };

// 嵌套的 border 颜色跟文字 color 颜色保持一致

const innerTheme = ({ color, background, border }) => ({

color,

background,

border: `1px solid ${color}`;

});

render(

<ThemeProvider theme={defaultTheme}>

<div>

<StyledBaseButton>Default Theme</StyledBaseButton>

<ThemeProvider theme={innerTheme}>

<StyledBaseButton>Inner Theme</StyledBaseButton>

</ThemeProvider>

</div>

</ThemeProvider>

);

一般情况下，很少用到 ThemeProvider 的嵌套。

在 styled-components 之外使用主题

参考链接: getting-the-theme-without-styled-components

上面实例中，默认只有 styled-components 样式组件可以使用 styled-components 注入的主题；

如果想要在 styled-components 样式组件之外（如 React 组件中）使用注入的 styled-components 主题，则可以使用下面几种方式。

使用 withTheme 方法

import { withTheme } from 'styled-components'

interface ThemeProps {

color: string;

background: string;

border?: string;

};

function InnerComponent({ theme }: { theme: ThemeProps }) {

console.log('Current theme: ', theme);

const StyledContent = styled.div<{theme: ThemeProps}>`

color: ${props => props.theme.color};

background: ${props => props.theme.background};

border: ${props => props.theme.border || 'none'};

`;

return <StyledContent>Use withTheme API</StyledContent>

}

export default withTheme(InnerComponent);

使用 useContext + ThemeContext 方法

注意：版本要求 v4 以上。

import { useContext } from 'react';

import { ThemeContext } from 'styled-components';

function InnerComponent() {

const themeContext = useContext(ThemeContext);

console.log('themeContext: ', themeContext);

}

使用 useTheme hook 方法

注意：版本要求 v4 以上。

import { useTheme } from 'styled-components';

function InnerReactComponent() {

const theme = useTheme()

console.log('theme: ', theme); // { color: '#333', background: '#fff', border: '1px solid #eee' }

}

如果项目中有专门的主题切换功能，已经注入了自己的 ThemeContextProvider, 也可以搭配 ThemeContextProvider 上下文在 React 组件中使用主题。

Ref 属性

参考链接: refs

在 styled-components 定义的样式组件上，也可以使用 ref 属性来关联 React 变量，跟在 React 组件中使用 ref 差不多。

注意：版本要求 v4 以上。

import { useRef, useEffect } from 'react';

import styled from 'styled-components';

const StyledInput = styled.input`

width: 240px;

color: #666;

border: none;

border-radius: 4px;

`;

export default function App() {

const inputRef = useRef();

useEffect(() => {

inputRef?.current?.focus();

}, []);

return (

<div>

<StyledInput ref={inputRef}></StyledInput>

</div>

);

}

以上的一些特性功能基本上够用了，还有一些其他功能用法和 API 可以参考 官方文档。

小结

本文主要介绍了 styled-components 库的特点、API 使用，以及在 React 项目中的一些应用场景。

在我开发的 NiceTab 插件项目中也只是一些粗浅的使用，在写这篇文章的过程中，也发现了一些项目中可以优化的点。

后续会继续分享插件开发过程中的一些实践总结。