How to fix the React console error regarding an unknown prop being sent through to the DOM

[NirachaMarchett]

Hi everyone,

I want the background colour of the header changes based on which page the user is on. I use css with conditional styles based on props (see Header Component). When I check the console, I received the warning error message as you can see on the image below. I changed the spelling as it suggested and got even more error messages. So I'm not sure what to do. Could someone please help me with this error?

here is the link to the PR adjust positioning if Xcross and background color of header

thank you so much!

[julialoeschel]

Hey,
You are using Props for styling, but you dont use it for anything else. React recognize this and hints you, that this is maybe not intentionally.

and thats true - its not ;)
styled-components has a solution for this.

here is an example we discussed in the session:

return (
  <>
    <Container>
      <Button>Click me</Button>
      <Button $color="danger">Click me not</Button>
    </Container>
    {/* ... */}
  </>
);

These sol called Transient props are not forwarded to the underlying DOM node and Recat will be happy :)