如何从样式组件中的另一个文件继承元素的 styles

Question

I have a navigation bar on the home page with background-color: white; On moving to another page. I want it to turn black .

My Navigation Styles file:

import styled from 'styled-components'

export const Nav = styled.nav`
 background-color: #fff;
`

My Navigation file where I am importing the styles:

import { Link } from 'react-router-dom'
import Nav from './NavStyles'

const NavBar = () => {
    return(
        <Nav>     
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/shop">Shop</Link>
                </li>
                <li>
                    <Link to="/cart">Cart</Link>
                </li>
            </ul>
        </Nav>
    )
}

export default NavBar

My ShopStyles file (where changing the background-color):

import styled from 'styled-components'
import  { Nav } from '../Nav/NavStyles'

const ShopNav = styled(Nav)`
    background-color: #323232;
`;

export default ShopNav

My Shop file:

import ShopNav from './ShopStyles'
import { Nav } from '../Nav/NavStyles'

const Shop = () => {
    return(
        <div>
            <Nav>
               <ShopNav></ShopNav>
            </Nav>
            
            <h1>Over here my shop design will come</h1>
        </div>
    )
}

export default Shop

App.js:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './components/Home/Home'
import NavBar from './components/Nav/Nav'
import Shop from './components/Shop/Shop'

const App = () => {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route exact path="/"> <Home /> </Route>
        <Route exact path='/shop'> <Shop /> </Route>
      </Switch>
    </Router>
    
  );
}

export default App;

How do I get the color black with my navigation bar?

Answer 1

I don't understand about your worry. The code which you've written is correct and I have also tested your code. I recommend that you will check your code again.