一些 styled-components 的最佳实践

最近一直在使用 styled-components，感觉有一些不方便的地方，所以搜了一下 styled-components best practices，看到一些文章，觉得写不错，记录一下。

参考

www.robinwieruch.de/styled-comp…

最佳实践

1. 当组件的代码量很小的时候，建议把 styled-components 和真实的组件写在一个文件中。但是当代码量增加的时候，建议把 styled-components 和真实的组件拆成两个文件，把 styled-components 放在当前目录下的 styles.js 文件中。

2. 可以共用一些 css 代码段，方式如下:

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

// 通过 css 方法定义好共用的片段
const red = css`
  color: red;
`;

const Headline = styled.h1`
  ${red} // 直接引入
  font-size: 20px;
`;
const Text = styled.p`
  ${red} // 直接引入
  font-size: 16px;
`;

首先通过 css 方法定义好共用的代码片段，然后在对应的组件中直接引入即可。

3. 不要通过解构的方式引入 styled-components，直接引入一个对象，例如：

import * as S from './styles';
// 不要通过下面这种方式引入
// import { HeadLine } from './styles';

const Content = ({ title, children }) => {
  return (
    <section>
      <S.Headline>{title}</S.Headline>
      <span>{children}</span>
    </section>
  );
};

通过直接引入一个整体对象的方式，可以减少真实组件中代码量，而且在 styles 中定义好就可以直接用了，不用在真实组件中再添加一行新的 styled-components 组件引入。

4. 使用 transient props，就是给 styled-components 使用的属性添加一个 $ 符号，可以避免把这个属性添加到 dom 上。而且很容易识别那些属性是给样式的，那些属性是给逻辑使用的。可以参考 styled-components.com/docs/api#tr…