Overriding a styled-component with new styled-component? - css

Question

I have a three styled-components StyledBanner and StyledTitle and WarningBanner.
I am looking to overwrite StyledBanner color through WarningBanner but is is not working out and the return Component always fall back to the div color.
How can I restyle a styled-component?
const StyledBanner = styled.div`
background-color: ${theme.colors.blue_2};
padding: 15px;
display: flex;
flex-direction: column;
border-radius: 4px;
width: 100%;
`;
const StyledTitle = styled(PG)`
font-size: 1.125rem;
font-weight: bold;
padding: 0px 0px 15px 0px;
colors: ${theme.colors.blue_2}
`
const WarningBanner = styled(StyledBanner)`
background-color: ${theme.colors.banner_yellow}
${StyledTitle}{
colors: ${theme.colors.textColor}
`
...
return (<WarningBanner> //still showing theme.colors.blue_2
{title ? <StyledTitle> //still showing theme.colors.blue_2
{title}
</StyledTitle> : null}
</WarningBanner>)

Answer 1

You have a minor typo in your posted code (the CSS property you want to set is color, not plural). Otherwise, your approach is perfectly valid.
Working example: https://codepen.io/mattlubner/pen/XWrvQLP
const theme = {
colors: {
red: '#f00',
greed: '#0f0',
blue: '#00f',
yellow: '#ff0',
},
};
const StyledBanner = window.styled.div`
background-color: ${theme.colors.blue};
padding: 15px;
display: flex;
flex-direction: column;
border-radius: 4px;
width: 100%;
`;
const StyledTitle = window.styled.h1`
font-size: 1.125rem;
font-weight: bold;
padding: 0px 0px 15px 0px;
color: ${theme.colors.blue};
`;
const WarningBanner = window.styled(StyledBanner)`
background-color: ${theme.colors.yellow};
${StyledTitle} {
color: ${theme.colors.green};
`;
ReactDOM.render(
<WarningBanner>
<StyledTitle>Example Title</StyledTitle>
</WarningBanner>,
document.getElementById('root'),
);