前端路线图

夜间模式

导航

Styled Components ​

上一篇《CSS Modules》仍然是在CSS文件里写CSS。

随着JSX的出现，前端开始在JS里写HTML。那么更进一步，JS里也可以写CSS。

Styled Components ​

styled-components 是一个JS库，它利用ES6新增的标签模板语法，将用户在JS中写的样式字符串，转换为JSX能够使用的组件。

jsx
import React from 'react';
import styled from 'styled-components';


const StyledCounter = styled.div`
  display: flex;
  /* ... */
`;
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 (
      <StyledCounter>
        <Paragraph>{this.state.count}</Paragraph>
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
      </StyledCounter>
    );
  }
}

除了使用styled其自带的HTML标签函数，也可以为JSX组件附加样式

jsx
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: #BF4F74;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

优缺点 ​

Styled Components和Tailwind一样是一个有争议的开发CSS的解决方案。

Tailwind是什么，一言以蔽之：在html class里写样式。

优点 ​

  • 可以在JSX中实现单文件组件了
  • 更好的跨平台支持。HTML、CSS是不能跨平台的，JS可以，例如weex、小程序

缺点 ​

  • 通过JS操作动态样式，牺牲了一些性能
  • 不可提取为css文件，无法在构建时去除未使用到的样式
  • 更复杂的语义管理问题，组件命名时需要描述这是什么样式的什么组件
  • 如果书写错误，会报JS错误，且难以定位错误位置

小结 ​

Styled Components是一种CSS in JS解决方案，它有着 CSS in JS 通用的跨平台支持特性，也具有 CSS in JS 造成性能下降的通病。

如果应用性能要求不高的话，我还是推荐使用Styled Components或其他 CSS in JS 方案，因为单文件组件是体验过就回不去的，也具有可扩展跨平台的潜力，适应未来需求迭代。