如何在TypeScript中使用styled-components的CSS props

你遇到的问题核心是：直接给原生div传自定义color props，在父组件的styled样式里无法正确获取，而且TypeScript会因为原生div没有该props而报错。之前尝试的styled-components/cssprop类型引入是用于支持全局CSS prop的，和你的场景不匹配，所以没用。

正确解决方案：创建带类型的独立styled组件 #

最清晰且符合TypeScript规范的做法是，单独定义一个接收color props的styled组件，而不是在父组件样式里直接选择子div：

import styled from 'styled-components';

// 定义组件的props类型
interface ColorItemProps {
  color: string;
}

// 创建带类型约束的ColorItem组件
const ColorItem = styled.div<ColorItemProps>`
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: ${props => props.color};
`;

// 渲染代码
<ColorHolder>
  {item.colors.map((color, index) => (
    <ColorItem key={index} color={color} />
  ))}
</ColorHolder>

为什么之前的写法不行？ #

1. 原生div没有color这个自定义props，TypeScript会直接报错提示属性不存在。
2. 父组件ColorHolder的styled样式中，& div选择的是子元素，但子元素的props并不会自动传递到父组件的styled props中，所以props.color根本拿不到值。

额外说明 #

如果一定要在父组件样式中控制，可以通过给子div添加data属性，再用属性选择器匹配，但这种写法不如单独定义组件直观：

// 渲染代码
<ColorHolder>
  {item.colors.map((color, index) => (
    <div key={index} data-color={color}></div>
  ))}
</ColorHolder>

// ColorHolder的样式
const ColorHolder = styled.div`
  & div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: attr(data-color);
  }
`;

不过这种方式在某些场景下可能有兼容性问题，还是推荐第一种方案。

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