更改Onsen UI菜单样式

Question

我想改变侧边菜单的样式，但在对onsen-css-components-blue-basic-theme.css进行多次更改后，我找不到包含边缘阴影的元素（见下图）。我想从菜单中删除阴影 - 这个文件是由？

处理的

<ons-sliding-menu var="menu" id="menusliding" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left"  ></ons-sliding-menu>

Answer 1

通常，最好不要触摸生成的文件，就像在某些时候您决定更改主题或更新版本一样，更改将被覆盖。因此，如果您只是在单独的文件中编写样式（至少在您决定将内容投入生产之前），而不是尝试更改框架css通常会更好。

关于这个问题：通过right click => inspect element可以找到这些事情。如果您在元素上执行此操作，您将能够看到样式的来源。你提出问题的方式听起来就好像你试图找到它但却无法找到它。可能如果你看了一会儿，你就能找到它。

在完成上述方法之后，我能够发现它实际上是在主要内容的element.style中定义的。有些图书馆会做这些事情，即使它不是很推荐，但它仍然是确保风格应用的最安全方式。 要删除它，你可以这样做。

.onsen-sliding-menu__main {
  box-shadow:none !important;
}

Demo

课程可能因onsen版本而异。它不是最优雅的解决方案，但ons-sliding-menu是一个相对较旧的组件。在Onsen 2中，实际上有一个ons-splitter元素，它结合了ons-sliding-menu和ons-split-view的行为。如果您使用它，您将看到那里的阴影已被删除。