Styling a injected HTML

[victorkardel]

Hello everyone, I want to style a property coming from my parent that already has predefined HTML tags.

import { stylePostWrapper } from "./style.css";

export interface Props {
  HTML: any;
}

export const PostWrapper = ({ html }: Props) => {
  return (
    <div
      dangerouslySetInnerHTML={{ __html: HTML }}
      className={stylePostWrapper}
    />
  );
};

My HTML is come from an API, and is in a .md format, with HTML tags like h1,h2,ol, etc.

How I can style just only for this component "PostWrapper" my children's html tags with vanilla extract?

[askoufis]

If I'm understanding correctly, you're trying to style descendant elements of your PostWrapper.

To achieve this you can use a style in combination with the globalStyle API.

So you could do something like this:

// style.css.ts
import { style, globalStyle } from '@vanilla-extract/css';

export const stylePostWrapper = style({});

globalStyle(`${stylePostWrapper} h1`, {
  color: 'pink'
});

globalStyle(`${stylePostWrapper} h2`, {
  color: 'blue'
});

// etc...

[victorkardel]

Works perfectly thanks!