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

这可以解决您的问题吗？

检索扩展样式

1 个答案: