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

【问题标题】：Unable to override storybook preview panel?无法覆盖故事书预览面板？
【发布时间】：2021-01-01 18:58:41
【问题描述】：

我找到了一种覆盖.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。

【问题讨论】：

您是否尝试过使用 !important 来强制执行规则？
@Bjorn.B：确实解决了我的问题，非常感谢！
很高兴它有帮助！我会将其添加为答案，以防人们来寻找答案。

标签： css reactjs react-native storybook

【解决方案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

【讨论】：