Styled
“Styled” is a collection of typographic components. And you can use them in multiple ways — whatever suits best your situation…
Main wrapper
Firstly, you can wrap the content with <Styled>, which styles all sorts of HTML tags. This is useful for displaying blog posts, articles and such.
Heading number three
- Unordered list item 1
- Unordered list item 2
- Ordered list item 1
- Ordered list item 2
Paragraph and an anchor and a horizontal line:
And this is the quote by…
| Col 1 | Col 2 |
|---|---|
| Cell 1 | Cell 2 |
You can also exclude an element from styling by attaching a --unstyled classname: [I am un unstyled anchor].
Tags
You can separately import components (e.g. <Heading1>, <Paragraph>, etc.) for HTML tags and style them one by one like this. You can take the advantage of Styled Components and write semantic code:
This is <h3> element looking like <Paragraph>.
Styles
Besides importing components, you can also import their CSS codes and insert them in your custom component. Though you should only use aporoach as a last resort.