import { Unstyled } from './Unstyled';

The Unstyled Block

By default most elements in docs have a few default styles applied to ensure the docs look good. This is achieved by applying default styles to most elements like h1, p, etc.. However sometimes you might want some of your content to not have these styles applied, this is where the Unstyled block is useful. Wrap any content you want in the Unstyled block to remove the default styles:

import { Unstyled } from '@storybook/addon-docs/blocks';

# This heading will be styled

<h2>So will this subheading</h2>

> This block quote will be styled

... and so will this paragraph.

<Unstyled>
  # This heading will not be styled

  <h2>Neither will this subheading</h2>

  > This block quote will not be styled

  ... neither will this paragraph, nor the following component:
  <MyCustomComponent />
</Unstyled>

Yields:

This heading will be styled

<h2>So will this subheading</h2>

This block quote will be styled

... and so will this paragraph.

<Unstyled> # This heading will not be styled <h2>Neither will this subheading</h2>

This block quote will not be styled

... neither will this paragraph, nor the following component: </Unstyled>