如何从stylesed -components中的另一个文件继承元素的样式

Question

我在主页上有一个导航栏，background-color: white;on移动到另一个页面。我想让它转到black

导航样式文件:

import styled from 'styled-components'
export const Nav = styled.nav`
background-color: #fff;
`

我要导入样式的导航文件:

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

我的ShopStyles文件(改变背景颜色的地方):

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;

如何让我的导航栏变成黑色?

Answer 1

我不明白你为什么担心。你写的代码是正确的，我也测试了你的代码。我建议你再检查一下你的代码。