Блог

Компонент «Боковая панель» и другой компонент, такой как «Тема», перекрываются, и я не знаю, как это остановить.
Я искал другие вопросы в StackOverflow и обнаружил, что использование flexbox полезно, но это не сработало для меня, как показано на рисунке.
Вот мой код.
Приложение.js:

 import React, { Component } from 'react'; import { BrowserRouter, Route } from 'react-router-dom'; import { connect } from 'react-redux'; import * as actions from '../actions';  import SideBar from './sideBar/SideBar'; import Landing from './landing/Landing'; import Home from './home/Home' import Subjects from './subjects/Subject' import "./app.css";  const App = () =gt; {  return (  lt;divgt;  lt;BrowserRoutergt;  lt;div className="app"gt;  lt;Route path="/app" component={SideBar} /gt;  lt;Route exact path="/" component={Landing} /gt;  lt;Route exact path="/app" component={Home} /gt;  lt;Route exact path="/app/subjects" component={Subjects} /gt;  lt;/divgt;  lt;/BrowserRoutergt;  lt;/divgt;  ); };  export default connect(null, actions)(App);  

приложение.css:

 .app {  display: flex;  flex-direction: row; }  

Subject.js:

 import React from "react"; import { Card, Button } from 'react-bootstrap';  const Subjects = () =gt; {  return (  lt;Card style={{ width: '18rem' }}gt;  lt;Card.Img variant="top" src="holder.js/100px180" /gt;  lt;Card.Bodygt;  lt;Card.Titlegt;Card Titlelt;/Card.Titlegt;  lt;Card.Textgt;  Some quick example text to build on the card title and make up the bulk of  the card's content.  lt;/Card.Textgt;  lt;Button variant="primary"gt;Go somewherelt;/Buttongt;  lt;/Card.Bodygt;  lt;/Cardgt;  ) };  export default Subjects;  

SideBar.js:

 import React, { useState } from 'react'; import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; import { ProSidebar, Menu, MenuItem, SubMenu, SidebarContent, SidebarFooter, SidebarHeader } from 'react-pro-sidebar'; import 'react-pro-sidebar/dist/css/styles.css'; import { FiHome, FiLogOut, FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi"; import { BiCog } from "react-icons/bi"; import { RiFilePaper2Fill } from "react-icons/ri"; import { AiFillTrophy } from "react-icons/ai"; import "./SideBar.css";  const Header = () =gt; {  const [menuCollapse, setMenuCollapse] = useState(false);   const menuIconClick = () =gt; {  menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);  };   return (  lt;gt;  lt;div id="header"gt;  {/* collapsed props to change menu size using menucollapse state */}  lt;ProSidebar collapsed={menuCollapse}gt;  lt;SidebarHeadergt;  lt;div className="logotext"gt;  {/* small and big change using menucollapse state */}  lt;pgt;{menuCollapse ? "Logo" : "Big Logo"}lt;/pgt;  lt;/divgt;  lt;div className="closemenu" onClick={menuIconClick}gt;  {/* changing menu collapse icon on click */}  {menuCollapse ? (  lt;FiArrowRightCircle/gt;  ) : (  lt;FiArrowLeftCircle/gt;  )}  lt;/divgt;  lt;/SidebarHeadergt;  lt;SidebarContentgt;  lt;Menu iconShape="square"gt;  lt;MenuItem icon={lt;FiHome /gt;}gt;  Home  lt;Link to="/app" /gt;  lt;/MenuItemgt;  lt;MenuItem icon={lt;RiFilePaper2Fill /gt;}gt;  Subjects  lt;Link to="/app/subjects" /gt;  lt;/MenuItemgt;  lt;MenuItem icon={lt;AiFillTrophy /gt;}gt;Rankinglt;/MenuItemgt;  lt;MenuItem icon={lt;BiCog /gt;}gt;Settingslt;/MenuItemgt;  lt;/Menugt;  lt;/SidebarContentgt;  lt;SidebarFootergt;  lt;Menu iconShape="square"gt;  lt;MenuItem icon={lt;FiLogOut /gt;}gt;  Logout  lt;Link to="/api/logout" /gt;  lt;/MenuItemgt;  lt;/Menugt;  lt;/SidebarFootergt;  lt;/ProSidebargt;  lt;/divgt;  lt;/gt;  ); };  function mapStateToProps({ auth }) {  return { auth };// === { auth: state.auth } }  export default connect(mapStateToProps)(Header);  

Боковая панель.css:

 #header {  position: absolute;  width: 220px;  display: flex; } #header .pro-sidebar {  height: 100vh; } #header .closemenu {  color: #000;  position: absolute;  right: 0;  z-index: 9999;  line-height: 20px;  border-radius: 50%;  font-weight: bold;  font-size: 22px;  top: 55px;  cursor: pointer; } #header .pro-sidebar {  width: 100%;  min-width: 100%; } #header .pro-sidebar.collapsed {  width: 80px;  min-width: 80px; } #header .pro-sidebar.collapsed ul .pro-inner-item {  font-size: 0px; }  #header .pro-sidebar-inner {  background-color: white;  box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);  /*  周りの枠線  */ } #header .pro-sidebar-inner .pro-sidebar-layout {  overflow-y: hidden; } #header .pro-sidebar-inner .pro-sidebar-layout .logotext p {  /*  Logo and Big Logo above  */  font-size: 20px;  padding: 0 20px;  color: rgb(202, 15, 15);  font-weight: bold; } #header .pro-sidebar-inner .pro-sidebar-layout ul {  padding: 0 0px; } #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {  /*  color of the list(Home, Subjects, etc...)  */  color: rgb(0, 0, 0);  margin: 10px 0px;  font-weight: bold; } #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {  /*  Each Icon's properties  */  background-color: #fbf4cd;  color: rgb(0, 0, 0);  border-radius: 3px; } #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {  color: #000; }  #header .logo {  padding: 20px; }  @media only screen and (max-width: 720px) {  html {  overflow: hidden;  } }  

Во-первых, вам нужно поделиться стилем боковой панели

Боковая панель не действует как элемент flex родительского контейнера flex, она принимает какой-то другой стиль.

lt;Subjects /gt; Компонент действует как первый элемент вашего контейнера flex

Если вы не собираетесь изменять стиль lt;Sidebar /gt; компонента, то все, что вы можете сделать, это предоставить margin-left либо контейнеру Flex, либо первому элементу flex