如何在styled components中消除antd图标组件的代码重复

有两种简单直接的方法可以消除代码重复，复用同一套样式：

方法一：创建样式工厂函数 #

定义一个接收Antd图标组件作为参数的函数，内部封装好通用样式，调用时传入不同的图标组件即可生成对应的styled组件：

import styled from 'styled-components';
import { DownOutlined, VerticalLeftOutlined } from '@ant-design/icons';

// 封装通用样式的工厂函数
const createStyledIcon = (IconComponent) => styled(IconComponent)`
  font-size: 16px;
  color: #165DFF;
  cursor: pointer;
  &:hover {
    color: #0E42C2;
  }
`;

// 生成带样式的图标组件
const StyledDownOutlined = createStyledIcon(DownOutlined);
const StyledVerticalLeftOutlined = createStyledIcon(VerticalLeftOutlined);

方法二：用css辅助函数抽离公共样式 #

利用styled-components的css辅助函数，把重复的样式抽离成单独变量，再在每个图标组件的styled定义中引入：

import styled, { css } from 'styled-components';
import { DownOutlined, VerticalLeftOutlined } from '@ant-design/icons';

// 抽离公共样式
const iconCommonStyles = css`
  font-size: 16px;
  color: #165DFF;
  cursor: pointer;
  &:hover {
    color: #0E42C2;
  }
`;

// 复用公共样式
const StyledDownOutlined = styled(DownOutlined)`
  ${iconCommonStyles}
`;

const StyledVerticalLeftOutlined = styled(VerticalLeftOutlined)`
  ${iconCommonStyles}
`;

两种方法都能实现样式复用，后续修改样式只需改动一处即可，维护成本更低。如果需要生成多个同样式的图标组件，工厂函数的方式会更简洁；如果只是少量组件复用，css变量的方式也足够灵活。

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