Using custom CSS

For those Plasmic Studio users who know CSS—you can inject arbitrary CSS onto pages using “Custom CSS Embed” from the component store. This ensures you are never limited by what you can configure natively using Plasmic’s styling controls in the right sidebar.

You can use this to apply CSS to individual elements, including styles that are not yet supported in Plasmic Studio. Simply define the class, and then on any element you want, apply the class there. Want to introduce a custom keyframe animation, advanced typographic settings, or a clip-path shape? You can now make these quick edits here without needing to drop down into the app host.

This also means you can use complex CSS selectors, such as selecting only odd-numbered children or in-focus descendants.

Note: you can do whatever you want with CSS, so just be aware that Plasmic Studio won’t gracefully be able to handle everything. And if you set styles that are normally configured via the right sidebar, Plasmic Studio won’t necessarily reflect the true state of certain styles in the respective style controls.

Have feedback on this page? Let us know on our forum.