检索扩展样式

Question

我的代码是：

styled(Button)`
  color: ${(props: any) => COLOR_I_CHOOSE}
`

我正在关注文档中的“扩展样式”部分 - https://www.styled-components.com/docs/basics#extending-styles

Button 是一个自定义样式的组件。我想传入一种颜色，以便将颜色的内部设置覆盖为COLOR_I_CHOOSE。我可以控制内部。在内部，我试图检测是否提供了任何样式覆盖并使用它。

在内部我这样设置 CSS：

const primaryChildre

nCSS = css`
  color: ${(props: any) => {
    console.log('props:', props);
    // TODO: test if props has override on color and use that
    // PSEUDOCODE: if (props.styleExtensions.color) return props.styleExtensions.color
    return props.inverse
      ? props.theme.ns().colors.brand
      : props.theme.ns().colors.white;
  }};
`;

我在这里注销了props，但不知道如何获得它。我想做上面的伪代码注释。

Answer 1

<Button> Hello</Button> // default color

如果传递的颜色不是红色，则以下内容将覆盖默认颜色Button。

const MyRedTextButton = styled(Button)`
  color:  ${(props: any) => props.color === 'red' ? 'inherit' : props.color}
`

然后：

<MyRedTextButton color="red"> Hello </MyRedTextButton> // color of 'Hello' = the color of <Button/>

<MyRedTextButton color="blue"> Hello </MyRedTextButton> // color of 'Hello' = blue

这能解决您的问题吗？