我有一个页脚，每当我单击最小化侧边栏菜单时，它的左边距都应该调整。margin-left属性在CSS上声明为270px，但是，当侧边栏关闭时，我希望将CSS中的margin-lift属性设置为90px。
如果侧边栏打开或关闭(true或false(，我可以在我的页脚组件上获得值。参见以下代码：
Footer.js
import React from "react";
import logo from "../../images/test-logo-footer.png";
import { MDBFooter } from "mdbreact";
import { useLayoutState } from "../../context/LayoutContext";
const Footer = () => {
var { isSidebarOpened } = useLayoutState();
return (
<MDBFooter color="grey" className="text-center font-small lighten-5">
{console.log("isSidebarOpened ", isSidebarOpened)}
{isSidebarOpened && (
<p className="footer-copyright mb-0 p-0 py-1 text-center">
{
<a href="#!" className="logo-wrapper waves-effect">
<img alt="" className="img-fluid" src={logo} />
</a>
}
</p>
)}
</MDBFooter>
);
};
export default Footer;
如上所述，打开侧边栏时isSidebarOpened变量为true，关闭时为false。
下面的CSS代码：
body {
margin: 0;
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #ededee;
}
a {
color: inherit;
}
.list-group-flush {
color: #495057;
}
.active {
background-color: #e9ecef !;
}
main {
background-color: #ededee;
}
.navbar-brand {
margin-left: 15px;
color: #2196f3 !important;
}
.flexible-navbar {
transition: padding-left 0.5s;
padding-left: 270px;
background: #fff;
}
#content {
margin-left: 270px;
/* height: 80%; TO:DO - to change after testing responsiveness */
}
.sidebar-fixed {
left: 0;
top: 0;
height: 100vh;
width: 270px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 1050;
background-color: #fff;
padding: 0rem 1rem 0rem 1rem;
}
.sidebar-fixed .logo-wrapper img {
width: 100%;
padding-top: 0rem;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 0rem;
}
.list-group-item-header {
display: block !important;
transition: background-color 0.3s;
overflow: hidden;
position: relative;
border: none;
}
.list-group-item {
display: block !important;
transition: background-color 0.3s;
overflow: hidden;
position: relative;
border: none;
}
.child-list-item {
font-size: 13px;
padding-left: 3em;
}
.list-group-item-header:hover {
color: #49505b;
text-decoration: none;
background-color: none;
}
.list-group-item-header:hover {
color: #49505b;
text-decoration: none;
background-color: none;
}
.list-group-item:hover {
color: #49505b;
text-decoration: none;
background-color: #f8f9fa;
}
.list-group-item:hover {
color: #49505b;
text-decoration: none;
background-color: #f8f9fa;
}
.list-group .active {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
}
.card-subtitle {
font-size: 1.25rem;
font-weight: 600;
}
.full {
height: 70vh;
}
.bad-gateway-row {
margin: 0;
position: absolute;
top: 50%;
left: 55%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.card .view.gradient-card-header {
padding: 1rem 1rem;
text-align: center;
}
.card h3,
.card.card-cascade h4 {
margin-bottom: 0px;
}
.cascading-admin-card .admin-up {
margin-left: 4%;
margin-right: 4%;
margin-top: -20px;
}
.cascading-admin-card .admin-up .fa {
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
}
.cascading-admin-card .admin-up .fa {
padding: 1.7rem;
font-size: 2rem;
color: #fff;
text-align: left;
margin-right: 1rem;
border-radius: 3px;
}
.cascading-admin-card .admin-up .data {
float: right;
margin-top: 2rem;
text-align: right;
}
.admin-up .data p {
color: #999999;
font-size: 12px;
}
.classic-admin-card .card-body {
color: #fff;
margin-bottom: 0;
padding: 0.9rem;
}
.classic-admin-card .card-body p {
font-size: 13px;
opacity: 0.7;
margin-bottom: 0;
}
.classic-admin-card .card-body h4 {
margin-top: 10px;
}
.form-inline {
flex-flow: unset;
}
.breadcrumb {
margin: 0;
/* tentative font size */
font-size: 1rem;
}
.activeClass .list-group-item {
z-index: 5;
color: #fff;
border-color: #007bff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 5px !important;
background-color: #007bff !important;
}
.activeClassItem .list-group-item {
z-index: 5;
color: #fff;
border-color: #007bff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 5px !important;
background-color: #007bff !important;
}
.page-footer {
margin-left: 270px;
/* margin-left: 90px; */
}
在CSS的最后一部分.page-footer中，这是页脚的边距来源。然而，我不确定我的页脚页面是如何调用CSS属性的，因此，我不知道如何根据侧边栏来切换它。
TIA-
也将样式用作条件样式并添加其他样式
import React from "react";
import logo from "../../images/test-logo-footer.png";
import { MDBFooter } from "mdbreact";
import { useLayoutState } from "../../context/LayoutContext";
const Footer = () => {
var { isSidebarOpened } = useLayoutState();
return (
<MDBFooter color="grey" className={isSidebarOpened?'margin1':'margin2'}>
{console.log("isSidebarOpened ", isSidebarOpened)}
//....
)}
</MDBFooter>
);
};
export default Footer;
或
style={{isSidebarOpened?margin1:margin2}}
或
{isSidebarOpened?
<style1/>
:<style2codes>
}
好的，所以我希望你知道css中的优先级，内联css比外部css具有更高的优先级，所以使用内部css来处理特定的侧栏问题