Styled Components/Emotion：如何抽离公共样式对象复用给多组件

完全可以通过抽离公共逻辑消除重复代码，以下是3种生产环境常用的实现方案，同时兼容Emotion和Styled Components：

• 方案1：抽离CSS样式片段
  借助库内置的css方法把公共样式封装为可复用片段，每个图标组件直接引入片段即可，适合公共样式固定、少量自定义扩展的场景：

  import { css } from '@emotion/react'; 
  // Styled Components 改为从 styled-components 导入css方法即可
  
  // 公共图标基础样式
  const baseIconCss = css`
    width: ${(props) => props.theme.sizes.iconDimension};
    height: ${(props) => props.theme.sizes.iconDimension};
    flex-shrink: 0;
  `;
  
  // 组件复用样式
  const BellIcon = styled(Bell)`${baseIconCss}`;
  const PlayIcon = styled(Play)`${baseIconCss}`;
  const RefreshIcon = styled(Refresh)`${baseIconCss}`;
  

  如果单个图标需要额外自定义样式，直接在模板字符串里追加在${baseIconCss}后面即可。

• 方案2：封装图标生成工厂函数
  如果后续需要批量给所有图标加统一的props逻辑、样式变体，推荐封装高阶生成函数，一行即可生成符合规范的图标组件：

  // 封装统一的图标生成方法
  const createIcon = (RawIcon) => styled(RawIcon)`
    width: ${(props) => props.theme.sizes.iconDimension};
    height: ${(props) => props.theme.sizes.iconDimension};
    flex-shrink: 0;
  `;
  
  // 批量生成带基础样式的图标
  const BellIcon = createIcon(Bell);
  const PlayIcon = createIcon(Play);
  const RefreshIcon = createIcon(Refresh);
  

• 方案3：抽离对象形式的公共样式
  如果你更习惯用对象语法写CSS，可以直接把公共规则抽离为样式对象，在定义组件时直接传入复用，也就是你提到的抽离独立样式对象的实现方式：

  // 公共样式对象
  const baseIconStyle = {
    flexShrink: 0,
    width: (props) => props.theme.sizes.iconDimension,
    height: (props) => props.theme.sizes.iconDimension
  };
  
  // 组件复用样式对象，可追加自定义样式覆盖默认规则
  const BellIcon = styled(Bell)(baseIconStyle, {
    /* Bell 图标专属样式写在这里 */
  });
  const PlayIcon = styled(Play)(baseIconStyle);
  const RefreshIcon = styled(Refresh)(baseIconStyle);
  

以上三种方案都可以实现一处修改、所有图标同步生效的效果，后续如果要新增尺寸、颜色变体，只需要在公共样式里添加对应的props判断逻辑，所有图标会自动支持新能力，不需要逐个修改组件代码。

内容的提问来源于stack exchange，提问作者sir-haver