如何将样式组件瞬态道具传递给嵌套组件？

Question

我创建了这样一个组件：

const StyledButton = styled.button<{ $variant: string }>`
  ...
`

$variant

props 是一个瞬态 prop（我不想将它传递给 DOM 元素（按钮）并且它可以工作。如果我想像下面这样嵌套这个组件怎么办？

const SpecialButton = styled(StyledButton)`
  ...
`

不幸的是，

$variant

没有传递给StyledButton。

是否可以将瞬态属性向下传递直到到达 DOM 元素？

Answer 1

在此示例中，您可以看到

Comp2

中确实可以使用transient prop。 希望这能解决您的疑问;)

您还可以看到瞬态属性在 DOM 中不可见

Answer 2

我可能已经太晚了，但给出你的例子：

const StyledButton = styled.button<{ $variant: string }>`
  ...
`

您将像这样使用您的

<StyledButton />

组件：

<StyledButton $variant="YOUR_BUTTON_VARIANT" />

现在，如果您按照您提到的方式分叉了

<StyledButton />

：

const SpecialButton = styled(StyledButton)`
  ...
`

您仍然可以从父组件访问所有属性，因为它们是由 fork 继承的。

<SpecialButton $variant="YOUR_BUTTON_VARIANT" />

在

<SpecialButton />

中，你可以像这样使用道具：

const SpecialButton = styled(StyledButton)`
  background-color: ${(props) => props.$variant === 'YOUR_BUTTON_VARIANT' ? 'blue' : 'yellow'};
`

或者你可以像这样解构 props 对象：

const SpecialButton = styled(StyledButton)`
  background-color: ${({ $variant }) => $variant === 'YOUR_BUTTON_VARIANT' ? 'blue' : 'yellow'};
`

您甚至可以向分叉组件添加道具：

const SpecialButton = styled(StyledButton)<{ $additionalProp: boolean }>`
  background-color: ${({ $variant }) => $variant === 'YOUR_BUTTON_VARIANT' ? 'blue' : 'yellow'};
  color: ${({ $additionalProp }) => $additionalProp ? 'black' : 'orange'};
`

这里需要注意的一件事是，您可以向 fork 添加额外的 props，但是您不能在父组件上使用这些 props，因为它只能在一个方向上工作。这意味着，您只能扩展父级，但不能让父级继承其后代的 props。在某些情况下，您可能只想使父组件上的一些道具可选。

我希望这能回答您的问题。