如何使用Styled Components避免冗长的条件渲染？

方案1：重构颜色变量结构 #

将同系列颜色归类到子对象中，直接通过数值索引访问，从根源简化取值逻辑：

// 重构后的变量定义
const Variables = {
    Colors: {
        Primary: {
            50: "rgb(244, 246, 247)",
            100: "rgb(209, 218, 225)",
            // ...其他Primary系列颜色
        },
        // ...其他颜色系列和变量
    }
}

对应Styled Component写法：

const Component = styled.div<{ $color: number }>`
    background-color: ${({ $color }) => Variables.Colors.Primary[$color] || '#fff'};
`

添加默认值（如#fff）是为了避免传入未定义的数值时出现样式异常。

方案2：不修改原有变量结构，通过字符串拼接取值 #

如果不想调整现有变量定义，可通过模板字符串拼接属性名动态获取颜色：

const Component = styled.div<{ $color: number }>`
    background-color: ${({ $color }) => {
        const colorKey = `Primary${$color}`;
        return Variables.Colors[colorKey] || '#fff';
    }};
`

这种方式无需改动原有变量结构，直接通过键名拼接实现动态取值，同样建议保留默认值做容错处理。

方案3：封装辅助函数统一处理颜色逻辑 #

如果多个组件都需要类似的颜色取值逻辑，封装辅助函数能让代码更简洁且易于维护：

// 封装辅助函数
const getPrimaryColor = (shade: number) => {
    const colorKey = `Primary${shade}`;
    return Variables.Colors[colorKey] || '#fff';
}

// 使用辅助函数的Styled Component
const Component = styled.div<{ $color: number }>`
    background-color: ${({ $color }) => getPrimaryColor($color)};
`

你之前的写法无效原因 #

Variables.Colors.Primary[$number]不生效，是因为Variables.Colors中并没有Primary这个属性——只有Primary50、Primary100这类直接定义的键名，导致Primary为undefined，无法通过[$number]获取对应值。

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