How to pass custom data-attribute to styled component?

Admin 1
Viewed 3265

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

styled-components reactjs custom-data-attribute javascript
3 Answers

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:

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}
`;
user_85342670

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>
);
user_76672480

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>

enter image description here

Admin1
Related