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

Posted 2023-02-19

【中文标题】无法覆盖故事书预览面板？

【英文标题】：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：确实解决了我的问题，非常感谢！

很高兴它有帮助！我会将其添加为答案，以防人们来寻找答案。

【参考方案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