使用styled-components为动态Material-UI图标自定义样式的方案咨询

我在项目中定义了一批图标，每个图标对应一个Material-UI的图标组件类型加上若干额外属性，这样设计是为了后续可以通过不同方式渲染这些图标。
现在我需要在两个不同场景复用同一个图标，其中一处显示红色，另一处显示绿色。但MUI图标不支持传入自定义RGB颜色的color属性，仅支持少量预设颜色，因此需要通过CSS的color属性来给图标组件自定义样式。
我使用styled-components，常规写法如下：

const StyledIcon = styled(AssignmentIcon)`
  color: red
`

但问题在于，部分场景下我无法提前确定要样式化的图标类型，比如某个组件接收的列表可能同时包含AssignmentIcon和BugReportIcon等不同图标。而styled-components不允许在其他组件内部定义样式组件，因此我无法直接把props传入的图标套用到上述的样式定义中。
我目前的解决方案是封装了一个styleIcon函数，接收React.ComponentType类型的动态图标，传入styled()后返回样式化后的组件，以此实现自定义样式。
我的疑问是：封装辅助函数的方案看起来不够规范，是否有更简洁的实现方式？另外我不能在渲染图标时使用style={{}}行内属性，否则可能和后续prop透传的其他样式产生冲突。

解决方案 #

直接使用styled-components原生支持的as属性即可，无需自定义封装辅助函数，这是官方推荐的动态切换渲染组件的标准方案。

实现步骤 #

1. 先定义一个通用的样式化图标基础组件，统一管理所有图标需要的通用样式：

import styled from 'styled-components'

const StyledMuiIcon = styled.svg`
  color: ${props => props.iconColor || 'inherit'};
  font-size: ${props => props.size || '24px'};
  /* 其他需要统一添加的通用样式，比如边距、对齐规则等都可以在这里定义 */
`

2. 使用时直接将动态传入的图标组件通过as属性传递给通用组件，同时传入自定义样式参数：

// 示例：渲染红色Assignment图标
<StyledMuiIcon as={AssignmentIcon} iconColor="#f5222d" size="20px" />

// 示例：渲染绿色BugReport图标
<StyledMuiIcon as={BugReportIcon} iconColor="#52c41a" size="24px" />

方案优势 #

• 符合styled-components官方规范，无需额外维护自定义工具函数
• 所有图标通用样式统一收敛在同一个组件中，后续迭代调整只需要修改一处
• 不会产生额外的性能开销，不需要动态生成新的样式组件实例
• 生成的样式以类名形式注入，不会和后续透传的其他样式规则产生冲突

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