Skip to content

Add Storybook global styling docs (#83) #444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LeoR-GitH wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Storybook global styling docs (#83) #444

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,30 @@ const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;
<CustomGlobalStyle />
```

## Using GlobalStyling with Storybook

When rendering components inside Storybook, global styles must be applied at the preview level so that all stories inherit them consistently.

You can achieve this by adding a decorator in your `.storybook/preview.js` (or `preview.tsx`) file.

Example:

```js
import React from 'react';
import { global } from '@storybook/design-system';

const { GlobalStyle, loadFontsForStorybook } = global;

loadFontsForStorybook();

export const decorators = [
(Story) => (
<>
<GlobalStyle />
<Story />
</>
),
];
## Font Loading

Rather than `@import` fonts in the `GlobalStyle` component, the design system's font URL is exported with the intention of using it in a `<link>` tag as the href. Different frameworks and environments handle component re-renders in their own way (a re-render would cause the font to be re-fetched), so this approach allows the design system consumers to choose the font loading method that is most appropriate for their environment.
Expand Down