React styled component not passing props from attribute

0
votes

I'm trying (unsuccessfully) to pass a single color value from a parent to a child using styled-components. If the color is passed correctly, the background should be the color that is passed. Else green. No matter what I do, the background-color is green What am I missing here?

The parent:

function App() {
  return (
    <div>
      <Article color="red"/>
    </div>
  );
}

The child:

const MainContetnt = styled.div`
    background-color: ${props => props.color ?? "green"};
    flex: 1;
`;
const Article = (props) => {
    return (
        <MainContetnt>
            Main content
        </MainContetnt>
)
};
1
reactjsstyled-components

1 Answers

1
votes

Props will not be passed automatically to a styled component, you still have to do it the usual way:

const Article = (props) => {
    return (
        <MainContetnt color="props.color">
            Main content
        </MainContetnt>
    )
};