无法覆盖故事书预览面板？

Question

我找到了一种通过使.sb-show-main如下来覆盖storybook.scss的方法。

//.storybook/storybook.scss

.sb-show-main {
  background-color: green;
  padding: 16px;
  margin: 20px;
}

然后只需将其导入.storybook/preview.js

import "./storybook.scss";

我面临且无法理解的问题是，background-color: green确实有效，但是padding和margin似乎被忽略了。想知道是否有人修改过sb-show-main吗？

填充的默认值为1rem，我想改为20px。

Answer 1

您尝试覆盖的样式可能正在使用css！important指令，或者可能在针对元素的定位方面更加具体。我总是首先尝试具体说明，否则我将!important作为最后的手段。

.container header ul li p {
  color: blue;
}

// OVERWRITE STYLES 
p { /* this wont work, because it's not as specific as the original rule */
  color: yellow;
}

.container header h1 ul li p { /* try this first */
  color: purple;
}

p { /* otherwise use !important as last resort */
  color: orange !important;
}

<div class="container">
  <header>
    <h1>Logo</h1>
    <ul>
      <li><p>One</p></li>
      <li><p>Two</p></li>
      <li><p>Three</p></li>
    </ul>
  </header>
</div