What is the BaseStyles component used for?

[dowi]

Hi

What is the BaseStyles component used for?
When should it be used?

Thanks!

[jxnblk]

See https://theme-ui.com/api#basestyles

[dowi]

So <h1> without BaseStyles will be styled based on other global css properties
and with BaseStyles it will be styled based on the Theme as in <Heading as={"h1"}> ?

Thanks!

[hasparus]

BaseStyles cascades your theme.styles.

So your <h1 /> is styled with theme.styles.h1 instead of theme.text.heading.

[hasparus]

Not sure how this aligns with @jxnblk idea for them, but IMHO

• variants and @theme-ui/components are really nice for building applications.
• theme.styles, BaseStyles, and @theme-ui/mdx including Styled are helpful in styling documents / blog posts.

It's common to have these two concerns in a web development project, but in smaller projects there might be only one of them.

[dowi]

What about the Styled component? What is the difference from BaseStyles ?I have read the docs but I do not understand when to use which or why there are so many options:
<Styled.h1>
<BaseStyles><h1></h1></BaseStyles>
<Heading as={"h1"}>

[lachlanjc]

BaseStyles styles its children, so it’s great for injecting Markdown or CMS content. Styled (now called Themed) styles that element with that tag name’s styles (e.g. <Styled.h2> === <h2 variant=“styles.h2”>)