Headless WYSIWYG content styling

[millnut]

I'm experimenting with Storybook and StyleX with our decoupled websites and CMS system. Overall it is going quite well however for WYSIWYG content that comes from the CMS such as an editor that supports paragraphs and ordered/unordered lists and then passes to a component I'm unable to see how best to style the user-generated code using StyleX.

Currently, in the design system we have a wysiwyg class and do similar to the following;

.wysiwyg p {margin-bottom: 24px;}
.wysiwyg ul, .wysiwyg ol {margin-bottom: 10px;}
...etc

Is a similar approach possible with StyleX given the raw HTML code comes directly from the CMS API, or is how we handle styling at the moment the recommended approach for this case?

[nmn]

StyleX is not suitable for styling content, only components. If you can't set classnames on an element, you can't use StyleX to style it.

Keep using vanilla CSS for this purpose.