How to pass custom data-attribute to styled component?

Question

I have this Styled component, where I'm trying to pass DATA -attribute which is coming from props to it. (This is the solution we have on Stack Overflow)

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

This is how I use this styled component in code

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

But this is doesn't change anything

Answer 1

The prop should already be "passed" in the sense that it will show up on the component for the purposes of using it in Cypress. If you want to use it internally you could also use transient props such as this

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

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

Answer 2

It was much easier. You can pass the data attribute directly where you use the styled component and everything will be fine.

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

Answer 3

I think that we must use correctly the attributes that are added to a component in React and more if they are needed only to style a component.

We should use as many native properties as possible but without compromising the private data that would be exposed in the HTML that the client displays in broser, therefore:

• If you are going to use data-attributes :

Remember how to name these attributes: The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"

Note: I would just use the simplest possible, with booleans to give a set of properties as the first answer described, for example:

component.js

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

component.styles.js

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

• If you want to use custom props without them being displayed in the DOM as the second comment has described, using transient props :

For sample:

component.js

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

component.styles.js

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

Answer 4

Maybe it's related to your bundler, since you should be able to pass a data attribute to a styled-component directly. However, if you're extending an existing component, be aware that you need to pass it through props. Those two situations will attach the data attribute to the final 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>
  );
}