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.
Header
as a separate component and import the component to yourNavigation
component aren't it – junwen-k