如何将自定义数据属性传递给样式组件？

Question

我有这个 Styled 组件，我试图将来自 props 的DATA属性传递给它。（这是我们在 Stack Overflow 上找到的解决方案）

export const InlineEditReadViewErrorContainer = styled.div.attrs(props => ({
  'data-cy': props.dataCy
}))`
  border: 2px solid #de350b;
  border-radius: 3px;
`;

这就是我在代码中使用这个样式组件的方式

 <InlineEditReadViewErrorContainer dataCy='blabla'>
   {readView}
 </InlineEditReadViewErrorContainer>

但这并没有改变任何事情

Answer 1

该 prop 应该已经被“传递”了，因为它将显示在组件上，以便在 Cypress 中使用它。如果你想在内部使用它，你也可以使用瞬态道具，例如这样

const Comp = styled.div`
  color: ${props =>
    props.$draggable || 'black'};
`;

render(
  <Comp $draggable="red" draggable="true">
    Drag me!
  </Comp>
);