I'm working on an react app with styled-components and I have a component 'Navigation'. In this component are more components like , , etc. Header for example is declared like this:
const Header = styled.div`
height: 48px;
width: 100%;
transition: all 0.5s ease-in;
Thing is that I have this Navigation component in different files and for all of them the styling is good but now I want to change the background color of the Header component in just one of those files, which is within(?) the Navigation component. How can I do that? I know that it's possible to change the styling from the Navigation component with something like const NewNav = styled(Navigation)`` but what about the Header?
Thank you in advance.
You can pass props through your navigation component to your header.
<NavigationExample secondary />
import styled, { css } from 'styled-components';
function NavigationExample(props) {
const { secondary } = props;
return (
<Navigation>
<Header secondary={secondary}>
...
</Header>
<Profile>
username
<Profile>
</Navigation>
);
}
const Navigation = styled.nav;
const Header = styled.header`
/* Base styles */
width: 100%;
height: 60px;
background: #222;
color: #fff;
${props => props.secondary && css`
background: #fff;
color: #000;
`;
`;
const Profile = styled.div``;
export default NavigationExample;
Alternatively, you can inline props in your css.
<NavigationExample backgroundColor="#222" />
const Header = styled.header`
/* Base styles */
width: 100%;
height: 60px;
background: ${props => props.backgroundColor || '#222'};
color: ${props => props.backgroundColor ? '#000' : '#fff'}; /* Adjusting text so it's legible like the previous example */
`;