new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Storybook · Setup · all subjects

addons/styling

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Styling addons with Emotion

Storybook uses Emotion for styling. It is recommended to use Emotion to style addon UI components, as this allows you to use the active Storybook theme to deliver a seamless developer experience. If you don't want to use Emotion, you can use inline styles or another css-in-js library. You can receive the theme as a prop by using Emotion's `withTheme` HOC.

Storybook UI primitives for addon styling

Storybook provides UI primitives for styling addons: Color Palette (a high-level abstraction of the `storybook/theming` module), Icon, and Typography components.

Addon styling approach using decorators and globals

In Storybook, applying styles for addons is considered a side-effect. Styling should be handled using decorators and globals, relying on helper functions to inject and remove stylesheets from the DOM when the addon is active or disabled.

Preview iframe selector differences between story and docs modes

The DOM node for Storybook's preview iframe is different in story and documentation modes. In documentation mode, Storybook renders multiple story previews on one page, so CSS must be scoped to the correct selector for the DOM node where styles will be injected.

Give your agent this brain