Paragraph

Paragraph is built on top of Material-UI's Typography and simply extends it with a default width and variant. It was built to provide an optimal reading experience for text-contents like in a blog.

Default

This is an awesome paragraph. It is based on the awesome material-ui Typography component. Its default variant is body1, and it has a maximal width of 650px. According to awesome studies, it is the range where the eye feels the most comfortable reading. In addition to its variant, you can of course use all the material-ui Typography component's props.

Extended

This component was extended using styled() from styled-components.

This is an awesome paragraph. It is based on the awesome material-ui Typography component. Its default variant is body1, and it has a maximal width of 650px. According to awesome studies, it is the range where the eye feels the most comfortable reading. In addition to its variant, you can of course use all the material-ui Typography component's props.

You can customize its width by leveraging the following theme value:

const customTheme = {
  typography: {
    paragraph: {
      maxWidth: 42,
    },
  },
}

Props

This component extends Material's UI <Typography> so you can use all its props as well. Check out its Api.

Name	Type	Default	Description
color		'textPrimary'
variant		'body1'

The ref will be forwarded to the html root element, as well as any other props.