javascript - How to get props from parent in React Styled Components

Question

In foo.js I have:

import Bar from "./bar.js"

function Foo() {
    const [myProp, setMyProp] = useState("red");

    return(
        <div>
            <Bar prop={myProp}/>
        </div>
    )
}

In bar.js I have:

import styled from "styled-components"

const MyStyledComponent = styled.h1`
    font-size: 2rem;
    color: props.color;
`

function Bar() {
    return(
        <MyStyledComponent/>
    )
}

Of course, color: props.color doesn't work outside of the function Bar. How do I access Bar's myProp property without putting MyStyledComponent inside the function and sacrificing good practices?

Answer 1

1. Bar needs to consume the props passed to it, and pass them on to children.
2. MyStyledComponent needs to correctly consume the passed prop.

Code

const MyStyledComponent = styled.h1`
  font-size: 2rem;
  color: ${(props) => props.color};
`;

function Bar({ prop }) {
  return <MyStyledComponent color={prop}>Test</MyStyledComponent>;
}

function Foo() {
  const [myProp, setMyProp] = useState("red");

  return (
    <div>
      <Bar prop={myProp} />
    </div>
  );
}