storybook [Bug]:奇怪的CSS被添加，影响文档样式

8aqjt8rx 于 5个月前发布在其他

关注(0)|答案(1)|浏览(54)

描述bug

在我的Storybook中，有一些iframe显示文档页面的CSS被添加到了以下内容：

.css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)) {
  font-family:
    "Nunito Sans",
    -apple-system,
    ".SFNSText-Regular",
    "San Francisco",
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-overflow-scrolling: touch;
}

选择器具有高特异性，因此它使得样式化div变得更加困难，而且字体样式也会被继承，所以我不得不无谓地添加类来覆盖它 - 但是当我在其他地方使用这些组件时，这些类将不再需要。

复现链接

https://666f2dc8033dde8c47f6a278-exnfuvkrwz.chromatic.com/?path=/docs/forms--docs

复现步骤

打开复现链接。
在表单页面上，检查标签“Name”
看到我不得不无谓地指定字体(通过 font-sans Tailwind类),因为否则样式会从上面描述的奇怪的CSS中继承。

系统

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5825U with Radeon Graphics
  Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (127.0.2651.74)

附加上下文

无响应*

storybook

来源：https://github.com/storybookjs/storybook/issues/28866

1条答案

按热度按时间

b1payxdu1#

免责声明
由于信息是自动生成的，可能存在不准确的情况。
为了解决过于具体的CSS选择器影响文档样式的问题，您可以修改lib/components/src/typography/DocumentFormatting.tsx文件中的CSS。具体来说，您应该调整选择器以降低其特异性并防止不必要的样式继承。以下是操作步骤：

打开lib/components/src/typography/DocumentFormatting.tsx。
找到与.css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div))匹配的CSS规则。
修改选择器以降低其特异性，例如：

.css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled)) {
  font-family: inherit;
  font-size: inherit;
  margin: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-tap-highlight-color: inherit;
  -webkit-overflow-scrolling: inherit;
}

此更改将有助于防止不必要的样式继承，减少需要额外的类来覆盖它们的需求。

参考资料

/.github/DISCUSSION_TEMPLATE/ideas.yml
/.github/DISCUSSION_TEMPLATE/help.yml
/.github/comments/invalid-link.md
/test-storybooks/server-kitchen-sink/stories/html_content/styles.stories.json
/docs/configure/styling-and-css.mdx
/code/lib/cli/src/automigrate/fixes/vta.ts
/test-storybooks/external-docs/styles
/.github/comments
/code/lib/cli/src/automigrate/fixes/addon-postcss.ts
/code/core/src/manager/components/notifications/NotificationItem.tsx
/code/core/src/manager/components/sidebar/Brand.tsx
/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts
/.github/DISCUSSION_TEMPLATE/rfc.yml
/code/frameworks/sveltekit/README.md
/code/chromatic.config.json
/docs/contribute/how-to-reproduce.mdx
/code/lib/cli/rendererAssets/common/page.css
/test-storybooks/server-kitchen-sink/public
/code/addons/docs/docs/faq.md
/code/addons/docs/template/stories/docspage/extract-description.stories.ts
/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css
/code/lib/cli/rendererAssets/common
/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
/code/addons/outline/README.md
/code/frameworks/web-components-webpack5/README.md

关于Greptile

此响应为您提供了研究的起点，而不是精确的解决方案。
帮助我们改进！如果这有帮助请留下一个👍，如果无关请留下一个👎。

赞(0）回复(0）举报 5个月前

我来回答