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

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

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

Unable to override storybook preview panel?

css

reactjs

react-native

storybook