Converting CSS to styled component issue - reactjs

Question

I am new to styled components. In my React code I have some conditional rendering to change some CSS depending on if I scroll my navbar with the following code:
const [colorChange, setColorchange] = useState(false)
const changeNavbarColor = () => {
if (window.scrollY >= 80) {
setColorchange(true)
} else {
setColorchange(false)
}
}
window.addEventListener("scroll", changeNavbarColor)
<nav className={colorChange ? "navbar colorChange" : "navbar"}>content</nav>
My problem is to write the styled component for this to work.
My normal CSS looked like this:
.navbar {
/*styles...*/
}
.navbar.colorChange {
/*styles...*/
}
I started by creating the following with some styles:
const Navbar = styled.nav`
/*styles...*/
`
But how do I share the styles that are common for both navbar and colorChange; I tried appending the following to the NavBar styled component:
const Navbar = styled.nav`
/*styles...*/
.colorChange{
/*styles...*/
}
`
And then when rendering the component in React, how do I convert this line to use the styled components instead?
<nav className={colorChange ? "navbar colorChange" : "navbar"}>content</nav>

Answer 1

You need pass colorChange state to NavBar component.
This is NavBar declaration
const NavBar = styled.nav`
//styled for nav bar
color: ${props => props.color}
`
And use it in component
<NavBar color={colorChange ? '#fff':'#ddd'}>{children}</NavBar>

Answer 2

Just pass prop as dynamic value
const Navbar = styled.nav`
// navbar common css
color: ${({ color}) => color};
`
<Navbar color={colorChange ? 'red':'transparent'} />
as you commented you have multiple styles I suggest below approach just pass on prop for isColorChange
const Navbar = styled.nav`
font-size: 13px; //common style
background: ${props => (props.isColorChange ? "#6495ED" : "#2b2b2b")};
background-color: ${props => (props.isColorChange ? "#6495ED" : "#2b2b2b")};
margin-top: ${props => (props.isColorChange ? "10px" : "20px")};
padding-top: ${props => (props.isColorChange ? "5px" : "10px")};
padding-bottom: ${props => (props.isColorChange ? "5px" : "10px")};
`;
<Navbar isColorChange={true / false}></Navbar>;