PSA: Custom CSS solution on how to style rich text content

https://plasmiccommunity.slack.com/archives/C0128PVPESU/p1661821736423349

Since I had no response, what I’ve ended up doing is making sure each paragraph, embed, image, etc has a class name. The post content container also has a classname. This way we can use the Embed CSS component and target specific content types in CSS. E.g.

.blog-post-content > .heading1 {
    font-size: 2em;
}

.blog-post-content > .heading2 {
    font-size: 1.75em;
}

If there is a better way I’d love to hear it. I looked at using repeatedElement, however there are multiple different component types that could be repeated. E.g. it could be Paragraph, Image, Embed or Heading. That seemed too difficult to model using Plasmic.

I’m using tailwind already so this makes it easy. There are probably a number of non-tailwind typography css plugins that format “article” content https://tailwindcss.com/docs/typography-plugin

Hi! Sorry I missed this earlier. Plasmic currently actually takes pains not to theme elements that were not generated by Plasmic (so that, for example, if you specify a default theme for an anchor element, it doesn’t affect all your code components that use an anchor). But this unfortunately also makes it hard to theme html content.

The best way for now is to do what you did – write custom css that target the rich text tags. We’re thinking about ways for you to “opt into” theming for certain code components, so that a code component that renders vanilla html will inherit the Plasmic theme styles

An idea I had was that you could expose the style controls as a component prop. It obviously already does this automatically with className . What I’m suggesting is to allow the creation of props like heading1ClassName and show the exact same controls in Plasmic Studio, but it’s targeting a child component determined by the programmer

@efficient_pelican Yeah we use tailwind also, however I wanted to give complete control to our designer without any outside influence.

Yeah, it would be awesome to be able to style different parts of a code component (multiple className props as you say)

Make it happen @chungwu :slightly_smiling_face:

:joy: