全面解析? Styled-Components

一、简介

在现代前端项目中，由于前端工程化的加入，原生 CSS 在工程化中的缺点展现了出来，复用性差、作用域和命名空间难以管理、缺乏工程能力等等。为了弥补这些缺陷，css 工程化中社区创造出了各种解决方案，其中包括 css 预处理器， postcss 后处理 css 能力， css-in-js 中 Styled-Components 是最为优秀的一种。

二、标签函数基础

Styled-Component 是标签函数的实践, 对标签函数有基本的了解有助于我们使用 StyledComponents。

const p1 = "p1";
const p2 = "p2";





function myTagFn(strings, param1, param2) {
  console.log(strings, param1, param2); //
}


const output = myTagFn`this is my ${p1} and ${p2}.`;





console.log(output); //  ['this is my ', ' and ', '.', raw: Array(3)] 'p1' 'p2'

说明：myTagFn 的第一个参数是字符串，第二个参数是标签函数的第一个变量，以此类推。

需要注意的是：标签函数的第一个参数 strings 是一个数组，不是一个字符串。

三、为什么要使用 styled-components?

styled-components 没有单独的创建一个 CSS 预处理语言。而是在 JS 的基础上增加了 CSS 能力。针对 React 扩展了 React 组件能力，这个对 JS + React 熟练的人是具有强吸引力的。styled-components 核心功能主打组件化样式，而不是一个功能强大的 css 预处理语言， 使用 styled-components， 在 React 中可以实现全组件式开发 CSS 样式。

const Button = styled.div`
  background: #f00;
`;









const ReactComp = new Button();

四、原生 CSS 再 React 中有哪些痛点？

• 原生 css 没有作用域，极易造成全局污染
• 难以处理嵌套层级关系
• 没有组件化和模块化
• 多样式存在样式覆盖和优先级问题
• 样式多状态管理困难

五、安装

pnpm add styled-components

六、初始化

1. 最简单的用法

improt styled from 'styled-components'



const Button = styled.button`
    background: #f00;
`

2. 全局样式注入

import { createGlobalStyle } from "styled-components"








const GlobalStyle = createGlobalStyle`
  body {
    color: red;
  }
`





<React.Fragment>
  <Navigation />
  <OtherImportantTopLevelComponentStuff />
  <GlobalStyle />
</React.Fragment>

七、api 说明

styled-components 提供了一系列 API，用于创建和管理样式化的组件。下面是一些常用的 styled-components API 的说明：

这些是 styled-components 的一些常用 API，它们提供了灵活和强大的功能，使你可以创建可重用、可定制和样式化的组件。通过结合这些 API，你可以轻松地定义和管理组件的样式，并在应用程序中实现一致的外观和行为。

八、用法

1. 基本用法

const Title = styled.h1`
  color: #bf4f74;



`;









const Wrapper = styled.section`
  background: papayawhip;
`;




render(

  <Wrapper>
    <Title>Hello World!</Title>
  </Wrapper>
);

2. props 特性

const Button = styled.button<{ $primary?: boolean }>`
  background: ${(props) => (props.$primary ? "#BF4F74" : "white")};
  color: ${(props) => (props.$primary ? "white" : "#BF4F74")};
`;




render(
  <div>
    <Button>Normal</Button>
    <Button $primary>Primary</Button>
  </div>
);

3. 组件扩展特性

const Button = styled.button`


  color: #bf4f74;



`;









const TomatoButton = styled(Button)`

  color: tomato;

`;




render(

  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

4. 任意组件特性(as 特性)

const Button = styled.button`


  color: #bf4f74;



`;









const TomatoButton = styled(Button)`

  color: tomato;

  border-color: tomato;
`;







render(
  <div>
    <Button>Normal Button</Button>
    <Button as="a" href="#">
      Link with Button styles
    </Button>
    <TomatoButton as="a" href="#">
      Link with Tomato Button styles
    </TomatoButton>
  </div>
);

5. 伪元素、伪选择器和嵌套特性

onst Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
  color: blue;





  &:hover {
    color: red; // <Thing> when hovered
  }


  & ~ & {
    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
  }

  & + & {
    background: lime; // <Thing> next to <Thing>
  }


  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`

render(
  <React.Fragment>
    <Thing>Hello world!</Thing>
    <Thing>How ya doing?</Thing>
    <Thing className="something">The sun is shining...</Thing>
    <div>Pretty nice day today.</div>
    <Thing>Don't you think?</Thing>
    <div className="something-else">
      <Thing>Splendid.</Thing>
    </div>
  </React.Fragment>
)

6. attrs 属性/特性

const Input = styled.input.attrs(props => ({
  type: "text",
  $size: props.$size || "1em",
})<{ $size?: string; }>`
  border: 2px solid #BF4F74;
  margin: ${props => props.$size};
  padding: ${props => props.$size};
`;







const PasswordInput = styled(Input).attrs({
  type: "password",
})`
  border: 2px solid aqua;
`;


render(
  <div>
    <Input placeholder="A bigger text input" size="2em" />
    <br />
    <PasswordInput placeholder="A bigger password input" size="2em" />
  </div>
);

7. 动画特性

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }





  to {
    transform: rotate(360deg);
  }
`;


const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

render(<Rotate>&lt; ?? &gt;</Rotate>);

8. 全局注入样式特性

const Thing = styled.div`
  && {
    color: blue;
  }

`;



const GlobalStyle = createGlobalStyle`
   div${Thing} {
     color: red;
   }
 `;



render(
  <React.Fragment>
    <GlobalStyle />
    <Thing>I'm blue, da ba dee da ba daa</Thing>
  </React.Fragment>
);

9. 主题特性

const Button = styled.button`


  font-size: 1em;
  color: ${(props) => props.theme.main};
  border: 2px solid ${(props) => props.theme.main};
`;



Button.defaultProps = {
  theme: {
    main: "#BF4F74",
  },
};




const theme = {
  main: "mediumseagreen",
};


render(
  <div>
    <Button>Normal</Button>

    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);

10. 转发特性

const Input = styled.input`
  color: #bf4f74;



`;









class Form extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }


  render() {
    return (
      <Input
        ref={this.inputRef}
        placeholder="Hover to focus!"
        onMouseEnter={() => {
          this.inputRef.current.focus();
        }}
      />
    );
  }
}

render(<Form />);

11. 安全特性

12. 服务端渲染特性

1. 字符串形式服务端渲染

import { renderToString } from "react-dom/server";
import { ServerStyleSheet } from "styled-components";





const sheet = new ServerStyleSheet();
try {
  const html = renderToString(sheet.collectStyles(<YourApp />));
  const styleTags = sheet.getStyleTags();
} catch (error) {
  console.error(error);
} finally {
  sheet.seal();
}

2. 流式服务端渲染 renderToNodeStream

import { renderToNodeStream } from "react-dom/server";
import styled, { ServerStyleSheet } from "styled-components";





res.write("<html><head><title>Test</title></head><body>");




const Heading = styled.h1`
  color: red;
`;







const sheet = new ServerStyleSheet();
const jsx = sheet.collectStyles(<Heading>Hello SSR!</Heading>);
const stream = sheet.interleaveWithNodeStream(renderToNodeStream(jsx));

stream.pipe(res, { end: false });
stream.on("end", () => res.end("</body></html>"));

九、优质项目推荐

• styled-bootstrap-components 一个基于 bootstrap 的 UI 组件库。
• React95 一个实现了 Windows95 的 UI 的组件库。

十、源码浅析

对外导出

import styled from "./constructors/styled";



export * from "./base";
export { styled, styled as default };

• base

/* Import singletons */
import { SC_ATTR, SC_VERSION } from "./constants";
import createGlobalStyle from "./constructors/createGlobalStyle";
import css from "./constructors/css";
import keyframes from "./constructors/keyframes";
/* Import Higher Order Components */
import withTheme from "./hoc/withTheme";
/* Import hooks */
import ServerStyleSheet from "./models/ServerStyleSheet";
import {
  IStyleSheetContext,
  IStyleSheetManager,
  IStylisContext,
  StyleSheetConsumer,
  StyleSheetContext,
  StyleSheetManager,
} from "./models/StyleSheetManager";
/* Import components */
import ThemeProvider, {
  ThemeConsumer,
  ThemeContext,
  useTheme,
} from "./models/ThemeProvider";
import isStyledComponent from "./utils/isStyledComponent";

export * from "./secretInternals";
export { Attrs, DefaultTheme, ShouldForwardProp } from "./types";
export {
  createGlobalStyle,
  css,
  isStyledComponent,
  IStyleSheetManager,
  IStyleSheetContext,
  IStylisContext,
  keyframes,
  ServerStyleSheet,
  StyleSheetConsumer,
  StyleSheetContext,
  StyleSheetManager,
  ThemeConsumer,
  ThemeContext,
  ThemeProvider,
  useTheme,
  SC_VERSION as version,
  withTheme,
};

• styled 的实现

import createStyledComponent from "../models/StyledComponent";
import { WebTarget } from "../types";
import domElements from "../utils/domElements";
import constructWithOptions, { Styled } from "./constructWithOptions";




const baseStyled = <Target extends WebTarget>(tag: Target) =>
  constructWithOptions<"web", Target>(createStyledComponent, tag);



const styled = baseStyled as typeof baseStyled & {
  [E in keyof JSX.IntrinsicElements]: Styled<"web", E>;
};




domElements.forEach((domElement) => {
  styled[domElement] = baseStyled<typeof domElement>(domElement);
});


export default styled;

十一、小结

本文旨在讲解曲面解析 Styled-Components， 从 JavaScript 标签函数开始，到 Styled-Components 的 api 实例，到社区的 UI 组件库，以及浅析其源码。