javascript - How to pass custom data-attribute to styled component? - Stack Overflow

admin管理员组

文章数量:1291108

I have this Styled ponent, where I'm trying to pass DATA-attribute which is ing 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 ponent in code

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

But this is doesn't change anything

I have this Styled ponent, where I'm trying to pass DATA-attribute which is ing 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 ponent in code

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

But this is doesn't change anything

• javascript
• reactjs
• styled-ponents
• custom-data-attribute

Share Improve this question Follow edited Jan 6, 2022 at 15:54 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Jan 6, 2022 at 13:39 user16140809user16140809

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

We should use as many native properties as possible but without promising 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:

ponent.js

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

ponent.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 ment has described, using transient props:

For sample:

ponent.js

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

ponent.styles.js

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

The prop should already be "passed" in the sense that it will show up on the ponent 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>
);

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

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

Maybe it's related to your bundler, since you should be able to pass a data attribute to a styled-ponent directly. However, if you're extending an existing ponent, 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>
  );
}

本文标签： javascriptHow to pass custom dataattribute to styled componentStack Overflow