Open jakubmazanec opened 2 months ago
Disclaimer This information might be inaccurate, due to it being generated automatically
To address the issue of the overly specific CSS selector affecting docs styling, you can modify the CSS in the lib/components/src/typography/DocumentFormatting.tsx
file. Specifically, you should adjust the selector to reduce its specificity and prevent unwanted inheritance of styles. Here are the steps:
lib/components/src/typography/DocumentFormatting.tsx
..css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div))
..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;
}
This change will help prevent the unwanted inheritance of styles and reduce the need for additional classes to override them.
/.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
It seems like this selector should NOT apply to any div under the .sb-unstyled div, but that does not seem to be the case.
Describe the bug
In my Storybook, there is following CSS added to some iframes that shows a docs page:
The selector has high specificity, so it makes styling divs more difficult, and also the font styles are inherited, so I have to needlessly add classes to override that - but those classes won't be needed when I use the components elsewhere.
Reproduction link
https://666f2dc8033dde8c47f6a278-exnfuvkrwz.chromatic.com/?path=/docs/forms--docs
Reproduction steps
font-sans
Tailwind class), because otherwise styling is inherited from the weird CSS described above.System
Additional context
No response