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>
)
};
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>
)
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.