我认为我们必须正确地使用在React中添加到组件的属性，如果只需要这些属性来设置组件的样式，则使用更多的属性。
我们应该使用尽可能多的原生属性，但不损害客户端在broser中显示的HTML中暴露的私有数据，因此：

*如果要使用data-attributes：

• 记住如何命名这些属性：属性名称不应包含任何大写字母，并且前缀“data-"* 后面必须至少有一个字符

注意：我将使用最简单的方法，用布尔值给予一组属性，如第一个答案所述，例如：

• 组件.js*

<Error data-active={true}>
   {readView}
</Error>

• 组件.样式.js*

export const Error = styled.div`
  &[data-active="true"] {
    border: 2px solid #de350b;
    border-radius: 3px;
  }
`;

***如果你想使用自定义的 prop ，而不是像第二条评论所描述的那样在DOM中显示它们，那么使用 transient prop **：

样品：

• 组件.js*

<Error $active={true}>
   {readView}
</Error>

• 组件.样式.js*

export const Error = styled.div`
  ${({$active}) => $active ? css`
     border: 2px solid #de350b;
     border-radius: 3px;
  `: null}
`;

该属性应该已经被“传递”，因为它将显示在组件上，以便在Cypress中使用。如果您希望在内部使用它，也可以使用transient属性，如下所示

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

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

这要简单得多。你可以在你使用样式化组件的地方直接传递数据属性，一切都会很好。

<InlineEditReadViewErrorContainer data-cy='dateInput'>
 {textValue}
</InlineEditReadViewErrorContainer>

这可能与捆绑器有关，因为你应该能够直接将data属性传递给样式化组件。但是，如果你扩展一个现有组件，请注意你需要通过props传递它。这两种情况会将data属性附加到最终的HTML：

function Text(props) {
  return (
    <p data-foo={props['data-foo']} className={props.className}>
      {props.children}
    </p>
  );
}

const StyledText = styled(Text)`
  color: blueviolet;
`;

const StyledHeading = styled.h1`
  color: gray;
`;

export default function App() {
  return (
    <div>
      <StyledHeading data-bar="foo">Hello StackBlitz!</StyledHeading>
      <StyledText data-foo="bar">
        Start editing to see some magic happen :)
      </StyledText>
    </div>
  );
}