【发布时间】：2021-01-10 15:41:41
【问题描述】：
我真的不明白为什么，但部分 CSS 不适用于我的代码，我觉得这不正常...
import React from 'react';
import classes from './Sidebar.module.css';
import pictures from '.././Pictures/orchestra_logo.png';
import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent, Menu, MenuItem, SubMenu} from 'react-pro-sidebar';
const sidebarComponentFunc = (props) => {
return(
<div className={classes.HideScrollbar}>
<ProSidebar className={classes.SidebarStyle}>
<SidebarHeader className={classes.SidebarHeader}>
<a href="https://www.google.fr"><img className={classes.Picture} src={pictures} alt="not found"></img></a>
<br></br>
<br></br>
</SidebarHeader>
<SidebarContent className={classes.SidebarContent}>
<Menu>
<br></br>
<br></br>
<SubMenu title="✅ REQUESTS" className={classes.MenuItem}>
<MenuItem className={classes.SubMenuItem}>solved requests</MenuItem>
</SubMenu>
<br></br>
<br></br>
<br></br>
<MenuItem className={classes.MenuItem}>???? CLIENT_NAME</MenuItem>
<SubMenu title="???? LEADS" className={classes.MenuItem}>
<MenuItem className={classes.SubMenuItem}>accounts</MenuItem>
<MenuItem className={classes.SubMenuItem}>contacts</MenuItem>
<MenuItem className={classes.SubMenuItem}>prospected</MenuItem>
<MenuItem className={classes.SubMenuItem}>ready for prospection</MenuItem>
<MenuItem className={classes.SubMenuItem}>enrichment</MenuItem>
<MenuItem className={classes.SubMenuItem}>scoring</MenuItem>
</SubMenu>
<br></br>
<br></br>
<br></br>
<SubMenu title="???? OPPORTUNITIES" className={classes.MenuItem}>
<MenuItem className={classes.SubMenuItem}>weekly</MenuItem>
<MenuItem className={classes.SubMenuItem}>monthly</MenuItem>
<MenuItem className={classes.SubMenuItem}>by status</MenuItem>
<MenuItem className={classes.SubMenuItem}>AE feedback</MenuItem>
</SubMenu>
<br></br>
<br></br>
<br></br>
<SubMenu title="???? BDR REPORTING" className={classes.MenuItem}>
<MenuItem className={classes.SubMenuItem}>daily activity</MenuItem>
<MenuItem className={classes.SubMenuItem}>analysis / comparison</MenuItem>
<MenuItem className={classes.SubMenuItem}>weekly reviews</MenuItem>
<MenuItem className={classes.SubMenuItem}>solved reviews</MenuItem>
<MenuItem className={classes.SubMenuItem}>funnel</MenuItem>
<MenuItem className={classes.SubMenuItem}>email stats</MenuItem>
</SubMenu>
<br></br>
<br></br>
<br></br>
<SubMenu title="???? ICP REPORTING" className={classes.MenuItem}>
<MenuItem className={classes.SubMenuItem}>daily activity</MenuItem>
<MenuItem className={classes.SubMenuItem}>analysis / comparison</MenuItem>
<MenuItem className={classes.SubMenuItem}>weekly reviews</MenuItem>
<MenuItem className={classes.SubMenuItem}>solved reviews</MenuItem>
</SubMenu>
<br></br>
<br></br>
<br></br>
<SubMenu title="???? CALL REVIEWS" className={classes.MenuItem}>
<MenuItem className={classes.SubMenuItem}>new reviews</MenuItem>
<MenuItem className={classes.SubMenuItem}>archived reviews</MenuItem>
</SubMenu>
<br></br>
<br></br>
<br></br>
<MenuItem className={classes.MenuItem}>???? EMAIL TEMPLATES</MenuItem>
<br></br>
<br></br>
<br></br>
<MenuItem className={classes.MenuItem}>???? CALLING SCRIPTS</MenuItem>
<br></br>
<br></br>
<br></br>
<SubMenu title="???? PLAYBOOK" className={classes.MenuItem}>
<MenuItem className={classes.SubMenuItem}>read</MenuItem>
<MenuItem className={classes.SubMenuItem}>edit and create</MenuItem>
</SubMenu>
<br></br>
<br></br>
</Menu>
</SidebarContent>
<SidebarFooter className={classes.SidebarFooter}>
<Menu>
<MenuItem className={classes.MenuItem}>BDR_manager_name</MenuItem>
</Menu>
</SidebarFooter>
</ProSidebar>
</div>
);
};
export default sidebarComponentFunc;
这是我的css代码：
.SidebarStyle{
position:fixed;
color: white;
height:100%;
top:0;
left:0;
}
.Picture{
display: block;
margin-left: 5%;
width: 150px;
height: 39px;
}
.SidebarHeader{
background-color: #28323E;
height: 50px;
padding-top: 10px;
padding-left: 10px;
width: 260px;
}
.MenuItem{
background-color: #323E4D;
padding-top: -15px;
padding-bottom: -15px;
}
.SubMenuItem{
background-color: #323E4D;
padding-top: -15px;
padding-bottom: -15px;
}
.SidebarContent{
font-size: 13px;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #323E4D;
}
.SidebarFooter{
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #323E4D;
}
.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item {
padding-left: 0px;
}
.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item {
margin-top:1px;
padding: 3px 30px 5px 22px;
}
.HideScrollbar{
overflow-y: hidden;
}
有些东西适用于代码：例如，在 CSS 的第一个类中，如果我将颜色更改为红色，它可以工作，但如果我想设置 font-size: 29px;它不起作用。应该隐藏滚动条的最后一个类也不起作用..我很困惑，如果有人可以帮助我，谢谢你的帮助:)
这是侧边栏的外观：
【问题讨论】：
-
您应该使用浏览器的开发工具来检查元素，也许您有其他样式覆盖了您想要的样式。 （你的 CSS 在开头缺少一些东西）
-
inspect 元素告诉我这是在 nodes-modules-css 中定义的，但这应该被 src 中的 css 覆盖...
-
尝试清除浏览器缓存。
-
@ManasKhandelwal 我试过这个，也可以在隐身模式下打开，但不幸的是它没有帮助......
-
SidebarContent有它自己的字体大小，你不能覆盖它改变SidebarStyle
标签： javascript css reactjs jsx