styled-components 备忘清单

此快速参考备忘单提供了使用 CSS in JS 工具的各种方法。

入门

安装

Styled Components 是增强 CSS 在 React 组件系统样式的 CSS in JS 的最佳实践。

安装依赖和 TypeScript 类型依赖

  1. npm install --save styled-components

快速开始

  1. import styled from 'styled-components';

创建一个 Title 组件

  1. // 该组件将呈现具有样式的 <h1> 标签
  2. const Title = styled.h1`
  3.   font-size: 1.5em;
  4.   text-align: center;
  5. `;

创建一个 Wrapper 组件

  1. // 该组件将呈现具有某些样式的 <section> 标记
  2. const Wrapper = styled.section`
  3.   padding: 4em;
  4.   background: papayawhip;
  5. `;

像使用其他 React 组件一样使用 Title/Wrapper - 除了它们的样式！

  1. function Demo() {
  2.   return (
  3.     <Wrapper>
  4.       <Title>
  5.         Hello World!
  6.       </Title>
  7.     </Wrapper>
  8.   );
  9. }

根据 Props 适配

  1. import styled from 'styled-components';
  3. const Button = styled.button`
  4.   /* 根据主要 props 调整颜色 */
  5.   background: ${
  6.     props => 
  7.       props.primary ? "blue" : "white"
  8.   };
  9.   color: ${
  10.     props => 
  11.       props.primary ? "white" : "blue"
  12.   };
  13.   font-size: 1em;
  14.   margin: 1em;
  15.   padding: 0.25em 1em;
  16.   border: 2px solid blue;
  17.   border-radius: 3px;
  18. `;

使用 primary props 控制按钮样式

```jsx {5} function Demo() { return (

); }

  2. ### 扩展样式
  4. ```jsx {7}
  5. const Button = styled.button`
  6.   color: palevioletred;
  7.   border: 2px solid palevioletred;
  8.   border-radius: 3px;
  9. `;
  10. // 基于 Button 的新组件，但具有一些覆盖样式
  11. const TomatoButton = styled(Button)`
  12.   color: tomato;
  13.   border-color: tomato;
  14. `;
  15. const Demo = () => (
  16.   <div>
  17.     <Button>普通按钮</Button>
  18.     <TomatoButton>番茄色按钮</TomatoButton>
  19.   </div>
  20. );

扩展样式改变标签 (as)

``jsx {17,20} const Button = styled.button color: palevioletred; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; display: block; `;

const TomatoButton = styled(Button)color: tomato; border-color: tomato;;

const Demo = () => (

番茄按钮样式的链接
);

  2. ### 自定义组件(as)
  3. <!--rehype:wrap-class=row-span-2-->
  5. ```jsx {20}
  6. const Button = styled.button`
  7.   color: palevioletred;
  8.   font-size: 1em;
  9.   border: 2px solid palevioletred;
  10.   display: block;
  11. `;
  13. const ReversedButton = props => (
  14.   <Button
  15.     {...props}
  16.     children={
  17.       props.children.split('').reverse()
  18.     }
  19.   />
  20. );
  22. render(
  23.   <div>
  24.     <Button>普通按钮</Button>
  25.     <Button as={ReversedButton}>
  26.       具有普通按钮样式的自定义按钮
  27.     </Button>
  28.   </div>
  29. );

样式化任何组件

  1. const Link = ({ className, children }) => (
  2.   <a className={className}>
  3.     {children}
  4.   </a>
  5. );
  6. const StyledLink = styled(Link)`
  7.   color: palevioletred;
  8.   font-weight: bold;
  9. `;
  10. <StyledLink className="hello" />

在 render 之外定义 Styled 组件

``jsx {3} const Box = styled.div/ … /`; const Wrapper = ({ message }) => { // ⚠️ 不能在这里定义 styled 组件 return ( {message} ); };

  2. 注意：组件 `Box` 不能放到 `Wrapper` 函数组件里面
  4. ### 传入值
  6. ```jsx {3,4,17}
  7. const Input = styled.input`
  8.   color: ${
  9.     props => 
  10.       props.inputColor || "palevioletred"
  11.   };
  12.   background: papayawhip;
  13. `;
  14. const Demo = () => (
  15.   <div>
  16.     <Input
  17.       defaultValue="@probablyup"
  18.       type="text"
  19.     />
  20.     <Input
  21.       defaultValue="@geelen"
  22.       type="text"
  23.       inputColor="rebeccapurple"
  24.     />
  25.   </div>
  26. );

样式对象

```jsx {2,5} const PropsBox = styled.div(props => ({ background: props.background, height: ‘50px’, width: ‘50px’, fontSize: ‘12px’ }));

  2. 在组件中使用
  4. ```jsx {5}
  5. const Example = () => {
  6.   return (
  7.     <div>
  8.       <PropsBox
  9.         background="blue"
  10.       />
  11.     </div>
  12.   );
  13. }

注意：样式对象里面的样式并不是 CSS 中的写法。

CSSModules => styled

  1. import React, { useState } from 'react';
  2. import styles from './styles.css';
  4. function ExampleCounter() {
  5.   const [count, setCount] = useState(0)
  6.   return (
  7.     <div className={styles.counter}>
  8.       <p className={styles.paragraph}>
  9.         {count}
  10.       </p>
  11.       <button
  12.         className={styles.button}
  13.         onClick={() => setCount(count +1)}
  14.       >
  15.         +
  16.       </button>
  17.       <button
  18.         className={styles.button}
  19.         onClick={() => setCount(count -1)}
  20.       >
  21.         -
  22.       </button>
  23.     </div>
  24.   );
  25. }

👇👇 与下面 styled 写法等效 👇👇

  1. import styled from 'styled-components';
  3. const StyledCounter = styled.div`
  4.   /* ... */
  5. `;
  6. const Paragraph = styled.p`
  7.   /* ... */
  8. `;
  9. const Button = styled.button`
  10.   /* ... */
  11. `;
  12. function ExampleCounter() {
  13.   const [count, setCount] = useState(0);
  14.   const increment = () => {
  15.     setCount(count +1);
  16.   }
  17.   const decrement = () => {
  18.     setCount(count -1);
  19.   }
  20.   return (
  21.     <StyledCounter>
  22.       <Paragraph>{count}</Paragraph>
  23.       <Button onClick={increment}>
  24.         +
  25.       </Button>
  26.       <Button onClick={decrement}>
  27.         -
  28.       </Button>
  29.     </StyledCounter>
  30.   );
  31. }

伪元素、伪选择器和嵌套

``jsx {3,6,9,12,15} const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 })) color: blue; &:hover { / 悬停时 / color: red; } & ~ & { / 作为 的兄弟，但可能不直接在它旁边 / background: tomato; } & + & { / 旁边的 / background: lime; } &.something { / 标记有一个额外的 CSS 类 “.something” / background: orange; } .something-else & { / 在另一个标记为 “.something-else” 的元素中 / border: 1px solid; } `;

render( Hello world! 你怎么样？ 艳阳高照…

今天真是美好的一天。
你不觉得吗？
灿烂
);

  2. ### 改变 styled 组件样式
  3. <!--rehype:wrap-class=row-span-2-->
  5. ```jsx {13,21}
  6. import { css } from 'styled-components'
  7. import styled from 'styled-components'
  9. const Input = styled.input.attrs({
  10.   type: "checkbox"
  11. })``;
  12. const LabelText = styled.span`
  13.   ${(props) => {
  14.     switch (props.$mode) {
  15.       case "dark":
  16.         return css`
  17.           color: white;
  18.           ${Input}:checked + && {
  19.             color: blue;
  20.           }
  21.         `;
  22.       default:
  23.         return css`
  24.           color: black;
  25.           ${Input}:checked + && {
  26.             color: red;
  27.           }
  28.         `;
  29.     }
  30.   }}
  31. `;
  33. function Example() {
  34.   return (
  35.     <React.Fragment>
  36.       <Label>
  37.         <Input defaultChecked />
  38.         <LabelText>Foo</LabelText>
  39.       </Label>
  40.       <Label>
  41.         <Input />
  42.         <LabelText $mode="dark">
  43.           Foo
  44.         </LabelText>
  45.       </Label>
  46.     </React.Fragment>
  47.   );
  48. }

全局样式 createGlobalStyle

```jsx {3,11} import { styled, createGlobalStyle } from ‘styled-components’

const Thing = styled.div&& { color: blue; }; const GlobalStyle = createGlobalStylediv${Thing} { color: red; };

const Example = () => ( 我是蓝色的 );

  2. ### className 使用
  4. ```JSX
  5. const Thing = styled.div`
  6.   color: blue;
  7.   /* <Thing> 中标记为“.something”的元素 */
  8.   .something {
  9.     border: 1px solid;
  10.   }
  11. `;
  13. function Example() {
  14.   return (
  15.     <Thing>
  16.       <label
  17.         htmlFor="foo-button"
  18.         className="something"
  19.       >
  20.         神秘按钮
  21.       </label>
  22.       <button id="foo-button">
  23.         我该怎么办？
  24.       </button>
  25.     </Thing>
  26.   )
  27. }

共享样式片段

  1. const rotate = keyframes`
  2.   from {top:0px;}
  3.   to {top:200px;}
  4. `;
  6. // ❌ 这将引发错误！
  7. const styles = `
  8.   animation: ${rotate} 2s linear infinite;
  9. `;
  11. // ✅ 这将按预期工作
  12. const styles = css`
  13.   animation: ${rotate} 2s linear infinite;
  14. `;

Class 组件样式定义

`jsx {5} class NewHeader extends React.Component { render() { return ( <div className={this.props.className} /> ); } } const StyledA = styled(NewHeader) const Box = styled.div${StyledA} { /* 变更 NewHeader 样式 */ };

  2. ### 附加额外的 Props
  4. ```jsx {3,5,13,14,23}
  5. const Input = styled.input.attrs(props=>({
  6.   // 我们可以定义静态道具
  7.   type: "text",
  8.   // 或者我们可以定义动态的
  9.   size: props.size || "1em",
  10. }))`
  11.   color: palevioletred;
  12.   font-size: 1em;
  13.   border: 2px solid palevioletred;
  14.   border-radius: 3px;
  16.   /* 这里我们使用动态计算的 props */
  17.   margin: ${props => props.size};
  18.   padding: ${props => props.size};
  19. `;

使用 Input 组件

  1. function Example() {
  2.   return (
  3.     <div>
  4.       <Input placeholder="小文本输入" />
  5.       <br />
  6.       <Input
  7.         placeholder="更大的文本输入"
  8.         size="2em"
  9.       />
  10.     </div>
  11.   )
  12. }

覆盖 .attrs

``jsx {11} const Input = styled.input.attrs(props=>({ type: "text", size: props.size || "1em", })) border: 2px solid palevioletred; margin: ${props => props.size}; padding: ${props => props.size}; ; // Input 的attrs会先被应用，然后这个 attrs obj const PasswordInput = styled(Input).attrs({ type: "password", }) / 同样，border 将覆盖 Input 的边框 / border: 2px solid aqua; `;

  2. 使用 `Input` 和 `PasswordInput` 组件
  4. ```jsx {5,11}
  5. render(
  6.   <div>
  7.     <Input
  8.       placeholder="更大的文本输入"
  9.       size="2em"
  10.     />
  11.     <br />
  12.     {/*⚠️ 仍然可以使用Input中的 size attr*/}
  13.     <PasswordInput
  14.       placeholder="更大的密码输入"
  15.       size="2em"
  16.     />
  17.   </div>
  18. );

动画

创建关键帧

  1. const rotate = keyframes`
  2.   from {
  3.     transform: rotate(0deg);
  4.   }
  6.   to {
  7.     transform: rotate(360deg);
  8.   }
  9. `;

我们创建一个 Rotate 组件

  1. // 它将在两秒内旋转我们传递的所有内容
  2. const Rotate = styled.div`
  3.   display: inline-block;
  4.   animation: ${rotate} 2s linear infinite;
  5.   padding: 2rem 1rem;
  6.   font-size: 1.2rem;
  7. `;

使用 Rotate 组件

  1. function Example() {
  2.   return (
  3.     <Rotate>&lt; 💅🏾 &gt;</Rotate>
  4.   )
  5. }

isStyledComponent

  1. import React from 'react'
  2. import styled, { isStyledComponent } from 'styled-components'
  3. import MaybeStyledComponent from './my'
  5. let TargetedComponent = isStyledComponent(MaybeStyledComponent)
  6.   ? MaybeStyledComponent
  7.   : styled(MaybeStyledComponent)``;
  9. const ParentComponent = styled.div`
  10.   color: cornflowerblue;
  12.   ${TargetedComponent} {
  13.     color: tomato;
  14.   }
  15. `;

ThemeConsumer

  1. import {
  2.   ThemeConsumer
  3. } from 'styled-components'
  5. function Example() {
  6.   return (
  7.     <ThemeConsumer>
  8.       {theme => (
  9.         <div>主题色是 {theme.color}</div>
  10.       )}
  11.     </ThemeConsumer>
  12.   );
  13. }

TypeScript

安装

Web 应用上安装 styled

  1. npm install -D @types/styled-components

React Native 应用上安装 styled

  1. npm install -D \
  2.     @types/styled-components \
  3.     @types/styled-components-react-native

如果对 TypeScript 不熟悉，参考 TypeScript 备忘清单

自定义 Props

  1. import styled from 'styled-components';
  3. interface TitleProps {
  4.   readonly isActive: boolean;
  5. }
  7. const Title = styled.h1<TitleProps>`
  8.   color: ${(props) => (
  9.     props.isActive 
  10.       ? props.theme.colors.main 
  11.       : props.theme.colors.secondary
  12.   )};
  13. `;

简单的 Props 类型定义

  1. import styled from 'styled-components';
  2. import Header from './Header';
  4. const Header = styled.header`
  5.   font-size: 12px;
  6. `;
  8. const NewHeader = styled(Header)<{
  9.   customColor: string;
  10. }>`
  11.   color: ${(props) => props.customColor};
  12. `;

禁止转移到子组件($)

```tsx {5} import styled from ‘styled-components’; import Header from ‘./Header’;

interface ReHeader { $customColor: string; }

const ReHeader = styled(Header)color: ${ props => props.$customColor };;

  2. 禁止 `customColor` 属性转移到 `Header` 组件，在其前面加上美元(`$`)符号
  4. ### 函数组件类型继承
  5. <!--rehype:wrap-class=col-span-2-->
  7. ```tsx {8,13}
  8. import { FC, PropsWithRef, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
  9. import styled from 'styled-components';
  11. const Img = styled.img`
  12.   height: 32px;
  13.   width: 32px;
  14. `;
  15. export interface ImageProps extends DetailedHTMLProps<
  16.   ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement
  17. > {
  18.   text?: string;
  19. };
  20. export const Image: FC<PropsWithRef<ImageProps>> = (props) => (
  21.   <Img src="" alt="" {...props} />
  22. );

React Native

基础实例

  1. import React from 'react'
  2. import styled from 'styled-components/native'
  4. const StyledView = styled.View`
  5.   background-color: papayawhip;
  6. `;
  7. const StyledText = styled.Text`
  8.   color: palevioletred;
  9. `;
  11. class MyReactNativeComponent extends React.Component {
  12.   render() {
  13.     return (
  14.       <StyledView>
  15.         <StyledText>Hello World!</StyledText>
  16.       </StyledView>
  17.     );
  18.   }
  19. }

React Native 中写 CSS

  1. import styled from 'styled-components/native'
  3. const RotatedBox = styled.View`
  4.   transform: rotate(90deg);
  5.   text-shadow-offset: 10px 5px;
  6.   font-variant: small-caps;
  7.   margin: 5px 7px 2px;
  8. `;
  10. function Example() {
  11.   return (
  12.     <RotatedBox />
  13.   )
  14. }

与 web 版本的一些区别是，您不能使用关键帧(keyframes)和 createGlobalStyle 助手，因为 React Native 不支持关键帧或全局样式。如果您使用媒体查询或嵌套 CSS，我们也会警告您。

高级用法

主题化

  1. import styled, { ThemeProvider } from 'styled-components'
  3. // 定义我们的按钮，但这次使用 props.theme
  4. const Button = styled.button`
  5.   font-size: 1em;
  6.   margin: 1em;
  7.   padding: 0.25em 1em;
  8.   border-radius: 3px;
  10.   /* 使用 theme.main 为边框和文本着色 */
  11.   color: ${props => props.theme.main};
  12.   border: 2px solid ${props => props.theme.main};
  13. `;
  15. // 我们正在为未包装在 ThemeProvider 中的按钮传递默认主题
  16. Button.defaultProps = {
  17.   theme: {
  18.     main: "palevioletred"
  19.   }
  20. }
  22. // 定义 props.theme 的外观
  23. const theme = {
  24.   main: "mediumseagreen"
  25. };
  27. render(
  28.   <div>
  29.     <Button>Normal</Button>
  31.     <ThemeProvider theme={theme}>
  32.       <Button>Themed</Button>
  33.     </ThemeProvider>
  34.   </div>
  35. );

功能主题

  1. import styled, { ThemeProvider } from 'styled-components'
  3. // 定义我们的按钮，但这次使用 props.theme
  4. const Button = styled.button`
  5.   color: ${props => props.theme.fg};
  6.   border: 2px solid ${props => props.theme.fg};
  7.   background: ${props => props.theme.bg};
  9.   font-size: 1em;
  10.   margin: 1em;
  11.   padding: 0.25em 1em;
  12.   border-radius: 3px;
  13. `;
  14. // 在主题上定义我们的`fg`和`bg`
  15. const theme = {
  16.   fg: "palevioletred",
  17.   bg: "white"
  18. };
  20. // 这个主题交换了`fg`和`bg`
  21. const invertTheme = ({ fg, bg }) => ({
  22.   fg: bg,
  23.   bg: fg
  24. });
  26. render(
  27.   <ThemeProvider theme={theme}>
  28.     <div>
  29.       <Button>默认主题</Button>
  30.       <ThemeProvider theme={invertTheme}>
  31.         <Button>反转主题</Button>
  32.       </ThemeProvider>
  33.     </div>
  34.   </ThemeProvider>
  35. );

通过 withTheme 高阶组件

  1. import { withTheme } from 'styled-components'
  3. class MyComponent extends React.Component {
  4.   render() {
  5.     console.log('Current theme: ', this.props.theme)
  6.     // ...
  7.   }
  8. }
  10. export default withTheme(MyComponent)

useContext 钩子

  1. import { useContext } from 'react'
  2. import { ThemeContext } from 'styled-components'
  4. const MyComponent = () => {
  5.   const themeContext = useContext(ThemeContext)
  7.   console.log('Current theme: ', themeContext)
  8.   // ...
  9. }

useTheme 自定义钩子

  1. import {useTheme} from 'styled-components'
  3. const MyComponent = () => {
  4.   const theme = useTheme()
  6.   console.log('Current theme: ', theme)
  7.   // ...
  8. }

主题 props

  1. import {
  2.   ThemeProvider,
  3.   styled
  4. } from 'styled-components';
  6. // 定义我们的按钮
  7. const Button = styled.button`
  8.   font-size: 1em;
  9.   margin: 1em;
  10.   padding: 0.25em 1em;
  11.   /* 使用 theme.main 为边框和文本着色 */
  12.   color: ${props => props.theme.main};
  13.   border: 2px solid ${props => props.theme.main};
  14. `;
  15. // 定义主题的外观
  16. const theme = {
  17.   main: "mediumseagreen"
  18. };

使用自定义主题组件

  1. render(
  2.   <div>
  3.     <Button theme={{ main: "royalblue" }}>
  4.       特设主题
  5.     </Button>
  6.     <ThemeProvider theme={theme}>
  7.       <div>
  8.         <Button>Themed</Button>
  9.         <Button
  10.           theme={{ main: "darkorange" }}
  11.         >
  12.           被覆盖
  13.         </Button>
  14.       </div>
  15.     </ThemeProvider>
  16.   </div>
  17. );

Refs

  1. import {
  2.   ThemeProvider,
  3.   styled
  4. } from 'styled-components';
  6. const Input = styled.input`
  7.   border: none;
  8.   border-radius: 3px;
  9. `;
  11. class Form extends React.Component {
  12.   constructor(props) {
  13.     super(props);
  14.     this.inputRef = React.createRef();
  15.   }
  17.   render() {
  18.     return (
  19.       <Input
  20.         ref={this.inputRef}
  21.         placeholder="Hover to focus!"
  22.         onMouseEnter={() => {
  23.           this.inputRef.current.focus()
  24.         }}
  25.       />
  26.     );
  27.   }
  28. }

使用 Form 组件

  1. function Example() {
  2.   return (
  3.     <Form />
  4.   )
  5. }

特异性问题

在文件 MyComponent.js 中定义 MyComponent 组件。

  1. const MyComponent = styled.div`
  2.   background-color: green;
  3. `;

定义样式 my-component.css

  1. .red-bg {
  2.   background-color: red;
  3. }

使用 MyComponent 组件

  1. <MyComponent className="red-bg" />

由于某种原因，这个组件仍然有绿色背景，即使你试图用 red-bg 类覆盖它！

解决方案

  1. .red-bg.red-bg {
  2.   background-color: red;
  3. }

ThemeProvider

  1. import styled, { ThemeProvider } from 'styled-components'
  3. const Box = styled.div`
  4.   color: ${props => props.theme.color};
  5. `;
  7. const Example = () => (
  8.   <ThemeProvider theme={{ color: 'mediumseagreen' }}>
  9.     <Box>I'm mediumseagreen!</Box>
  10.   </ThemeProvider>
  11. );

shouldForwardProp

  1. const Comp = styled('div').withConfig({
  2.   shouldForwardProp: (prop, defaultValidatorFn) =>
  3.       !['hidden'].includes(prop) && defaultValidatorFn(prop),
  4. }).attrs({ className: 'foo' })`
  5.   color: red;
  6.   &.foo {
  7.     text-decoration: underline;
  8.   }
  9. `;
  11. const Example = () => (
  12.   <Comp hidden draggable="true">
  13.     Drag Me!
  14.   </Comp>
  15. );