如何为多个styled-components组件复用同一套props样式逻辑

核心结论 #

styled-components支持通过变量存储可复用的样式逻辑，但不能直接用普通JS对象插入样式模板字符串，需要使用官方提供的css工具函数封装样式片段，你之前的写法不生效就是因为不符合该语法规范。

推荐DRY实现代码 #

首先导入styled-components的css工具，封装公共样式片段，所有props判断逻辑只需编写一次：

import { styled, css } from 'styled-components';
import { H1, H2, H3, H4, H5, H6 } from '@blueprintjs/core';

// 公共样式逻辑统一封装
const commonHeadingStyles = css`
  color: ${(props) => props.white ? "white" : null};
  display: ${(props) => props.flex ? "flex" : null};
  opacity: ${(props) => props.opaque ? 0.7 : null};
  font-weight: ${(props) => props.heavy ? 500 : 300};
  text-align: ${(props) => props.center ? "center" : null};
  font-style: ${(props) => props.italics ? "italic" : null};
  text-decoration: ${(props) => props.underline ? "underline" : null};
`;

// 各个标题组件直接复用公共样式即可
export const DH1 = styled(H1)`${commonHeadingStyles}`;
export const DH2 = styled(H2)`${commonHeadingStyles}`;
export const DH3 = styled(H3)`${commonHeadingStyles}`;
export const DH4 = styled(H4)`${commonHeadingStyles}`;
export const DH5 = styled(H5)`${commonHeadingStyles}`;
export const DH6 = styled(H6)`${commonHeadingStyles}`;

批量生成简化方案 #

如果要进一步减少重复代码，可以用工厂函数批量生成所有标题组件：

import { styled, css } from 'styled-components';
import { H1, H2, H3, H4, H5, H6 } from '@blueprintjs/core';

const commonHeadingStyles = css`/* 同上公共样式逻辑 */`;

// 组件生成工厂函数
const createDHeading = (HeadingComponent) => styled(HeadingComponent)`${commonHeadingStyles}`;

// 批量生成所有自定义标题组件
export const DH1 = createDHeading(H1);
export const DH2 = createDHeading(H2);
export const DH3 = createDHeading(H3);
export const DH4 = createDHeading(H4);
export const DH5 = createDHeading(H5);
export const DH6 = createDHeading(H6);

内容的提问来源于stack exchange，提问作者mmz