CSS继承在这种情况下如何工作？

Question

我正在设置两个不同的导航栏，一个用于移动版本，一个用于桌面版本，我目前已经很好地完成了桌面版本并在移动版本上工作，但是当我将两个组件都放在一个app.js中时， navbar.js正在扩展并从桌面navbar的nav

import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import 'util/util.js'

import HomePageBody from '../components/homepage/HomePageBody.jsx'
import Footer from '../components/footer/Footer.jsx'
import Menubar from "../components/menubar/MenuBar";
import SideBar from '../components/sidebar/SideBar'


class HomePage extends Component {
  componentDidMount() {
    window.scrollTo(0, 0);
}

  render() {
    return (
      <React.Fragment>
      <div style={{height: '100%'}}>
        <Menubar />
        <SideBar />
        <HomePageBody />
        <Footer />
      </div>
      </React.Fragment>
    )
  }
}

export default HomePage