侧边栏折叠时如何删除框阴影（使用切换按钮）？

Question

我做了这个侧边栏，当它折叠时我无法删除它。我尝试了 box-shadow: none; 也 box-shadow: none !important; box-shadow: transparent; 甚至尝试更改颜色：box-shadow: yellow; 但它不起作用。倒塌时我应该怎么做才能去除阴影？都是关于 React 组件的：

    <div>
      <div className="sidebar-container container-flex navbar-expand-sm navbar-light">
        <div className="navbar-header bg-white">
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
        </div>
        <div
          className="collapse navbar-collapse bg-white .d-none .d-sm-block .d-md-none"
          id="navbarSupportedContent"
        >
          <div className="title1">Title</div>

          <div className="title2">Title 2</div>
          <ul className="mr-auto mb-2 mb-lg-0">
            {<SidebarElement props={props} />}
          </ul>
        </div>
      </div>
    </div>

这是边栏CSS:

li {
  list-style-type: none;
}

.title1 {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.5px;
  padding-top: 24px;
  padding-left: 24px;
  padding-bottom: 28px;

  color: #336cfb;
}

.title2 {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding-top: 24px;
  padding-left: 24px;
  padding-bottom: 20px;

  color: #52575c;
}

.active-link {
  color: #336cfb;
}

.sidebar-container {
  position: fixed;
  width: 242px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  box-shadow: 5px 0 5px -5px #333; /* Normal box shadow */
}

.navbar-collapse {
  background: transparent;
  height: inherit;
  /*  box-shadow: none;  */ /* override box shadow */
  box-shadow: yellow;
}

.collapse {
  box-shadow: none; /* override box shadow */
}

#navbarSupportedContent {
  flex-direction: column;
  align-items: flex-start;
}

这是 SidebarElement css:

.nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;

  color: #52575c;
}

.customIcon {
  width: 18px;
  padding-right: 10px;
  color: #dbdde0;
}

li {
  list-style-type: none;
  padding: 14px 10px;
}

.active-link {
  color: #336cfb;
}

Answer 1

1：您没有重置同一元素上的框阴影

2：CSS 被解释为自上而下 - `none` 的 box-shadow 被立即覆盖。

.sidebar-container {
  position: fixed;
  width: 242px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  box-shadow: 5px 0 5px -5px #333; /* Normal box shadow */
}

.navbar-collapse {
  background: transparent;
  height: inherit;
  box-shadow: none; /* override box shadow */
}

.collapse {
  box-shadow: none; /* override box shadow */
}

#navbarSupportedContent {
  flex-direction: column;
  align-items: flex-start;
}

侧边栏折叠时如何删除框阴影（使用切换按钮）？

How to remove box-shadow when side bar collapse (with toggle button)?

css

sidebar

toggle

bootstrap-4

1：您没有重置同一元素上的框阴影

2：CSS 被解释为自上而下 - `none` 的 box-shadow 被立即覆盖。

侧边栏折叠时如何删除框阴影（使用切换按钮）？

How to remove box-shadow when side bar collapse (with toggle button)?

css

sidebar

toggle

bootstrap-4

1：您没有重置同一元素上的框阴影

2：CSS 被解释为 自上而下 - none 的 box-shadow 被立即覆盖。

2：CSS 被解释为自上而下 - `none` 的 box-shadow 被立即覆盖。