How to use the @storybook/theming.styled.h1 function in @storybook/theming

import React from 'react';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';

import { DocumentFormatting } from '../typography/DocumentFormatting';

const breakpoint = 600;
const pageMargin = '5.55555';

export interface DocsPageProps {
  title: string;
  subtitle?: string;
}

const Title = styled.h1(({ theme }) => ({
  // overrides h1 in DocumentFormatting
  '&&': {
    fontSize: theme.typography.size.m3,
    lineHeight: '32px',

    [`@media (min-width: ${breakpoint * 1}px)`]: {
      fontSize: theme.typography.size.l1,
      lineHeight: '36px',
    },
  },
}));

const Subtitle = styled.h2(({ theme }) => ({
  // overrides h2 in DocumentFormatting
  '&&': {
    fontWeight: theme.typography.weight.regular,

import React, { Component } from 'react';
import json from 'format-json';
import PropTypes from 'prop-types';

import { styled } from '@storybook/theming';
import EventEmitter from 'eventemitter3';
import uuid from 'uuid/v4';

const Wrapper = styled.div({
  padding: 20,
});
const Title = styled.h1({
  margin: 0,
});
const Item = styled.div({
  listStyle: 'none',
  marginBottom: 10,
});

export default class Logger extends Component {
  static propTypes = {
    emitter: PropTypes.instanceOf(EventEmitter).isRequired,
    title: PropTypes.string,
  };

  static defaultProps = {
    title: 'Logger',
  };

import { styled } from '@storybook/theming';

const Wrapper = styled.div({
  fontSize: '14px',
  letterSpacing: '0.2px',
  margin: '10px 0',
});

const Main = styled.div({
  margin: 'auto',
  padding: '30px',
  borderRadius: '10px',
  background: 'rgba(0,0,0,0.03)',
});

const Heading = styled.h1({
  textAlign: 'center',
});

export const NoDocs = () => (
  
    <main>
      No Docs
      <p>
        Sorry, but there are no docs for the selected story. To add them, set the story's{' '}
        <code>docs</code> parameter. If you think this is an error:
      </p>
      <ul>
        <li>Please check the story definition.</li>
        <li>Please check the Storybook config.</li>
        <li>Try reloading the page.</li>
      </ul></main>

float: 'none',
      marginTop: 10,
      display: 'block',
      textAlign: 'center',
    },
  }
);

export const FullChangeLogLink = styled(ExernalLink)(({ theme }) => ({
  float: 'right',
  fontWeight: 'normal',
  fontSize: 11,
  color: theme.dimmedTextColor,
}));

export const Heading = styled.h1({
  fontSize: 16,
});

export const Header = styled.div({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
});

export const A = styled(ExernalLink)({
  color: 'inherit',
});

export const Footer = styled.div(({ theme }) => ({
  display: 'flex',
  flex: 1,

import React, { Component } from 'react';
import json from 'format-json';
import PropTypes from 'prop-types';

import { styled } from '@storybook/theming';
import EventEmitter from 'eventemitter3';
import uuid from 'uuid/v4';

const Wrapper = styled.div({
  padding: 20,
});
const Title = styled.h1({
  margin: 0,
});
const Item = styled.div({
  listStyle: 'none',
  marginBottom: 10,
});

export default class Logger extends Component {
  state = {
    events: [],
  };

  static propTypes = {
    emitter: PropTypes.instanceOf(EventEmitter).isRequired,
    title: PropTypes.string,
  };