storybookjs/storybook
在 GitHub 查看[Bug]: React + Storybook + Vite example component Page.css can leak
Open
#23,862 建立於 2023年8月16日
buggood first issuehelp wantedsev:S4
描述
Describe the bug
The example src/stories/Page.tsx component includes this at the top:
import React from 'react';
import { Header } from './Header';
import './page.css';
The contents of page.css are:
section {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
padding: 48px 20px;
margin: 0 auto;
max-width: 600px;
color: #333;
}
section h2 {
font-weight: 700;
font-size: 32px;
line-height: 1;
margin: 0 0 4px;
display: inline-block;
vertical-align: top;
}
// Omitted for brevity
I've just noticed that my own component's story which uses <section> was picking up those styles:
Head:
Component affected:
I can just delete the examples, and all is well. Not a high priority problem. It does raise the question though, why would that be required? Can that initial import be a scoped page.module.css to avoid having to remove docs that are helpful to new developers in the future?
To Reproduce
Interestingly, I can't reproduce using a basic stack blitz, even clicking through to Page and back to ComponentA doesn't have the effect. It's reliable on my local though.
System
Environment Info:
System:
OS: macOS 13.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 18.13.0 - /usr/local/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 9.5.1 - /usr/local/bin/npm
Browsers:
Chrome: 115.0.5790.170
Safari: 16.5
npmPackages:
@storybook/addon-essentials: ^7.2.1 => 7.2.1
@storybook/addon-interactions: ^7.2.1 => 7.2.1
@storybook/addon-links: ^7.2.1 => 7.2.1
@storybook/blocks: ^7.2.1 => 7.2.1
@storybook/react: ^7.2.1 => 7.2.1
@storybook/react-vite: ^7.2.1 => 7.2.1
@storybook/testing-library: ^0.2.0 => 0.2.0
Additional context
No response