Set react variant based on rehype element class?

[swamidass]

I'm using html source files for articles that are converted with rehype-parse, some plugins, then rehype-react. Is there a way to set the react components' variant based on the classes assigned to the hast elements?

[lachlanjc]

Hey! For more technical help I'd need to understand more of the specific implementation details, but a few things come to mind:

1. If it's based on the HTML tags, the BaseStyles component will apply your styles object: https://theme-ui.com/api/#basestyles
2. If you want to generate a global class based on a variant, you could create a class with the Global component (https://theme-ui.com/guides/global-styles) with a value of theme.styles.h1 or wherever your variant lives
3. You could use React's cloneElement to render each node as a Theme UI component

Does that help?

[swamidass]

Thanks for the note. I was wondering more about a situation where a div has a class, e.g.

content

Is there a way to style that div by mapping the class to a variant?

[hasparus]

I was wondering more about a situation where a div has a class

You don't need the variant feature here IMHO. You already have a variant concept, but it just comes in play based on the class.

Something like this should work:

const variantBlue = { color: "blue" }
const variantRed = { color: "red" }

const style = {
  "&.blue": variantBlue,
  "&.red": variantRed
}

[swamidass]

Yes, in this case that could work. Thanks.