Use CSS in custom component

When you create a custom component, you can define the CSS of your component in a CSS file or inline. If you use an external file double-check you use prefixed classes, otherwise, it can create conflicts if the component is rendered in the hosting page without an iFrame.

If your component defines properties that need to be used in the CSS file, you can use CSS variables. For example, say your component defines a color property. It can be set this way:

<div className={`my-component ${props.classes}`} 
     style={ {...style, '--color':props.color} }>
</div>

In the CSS file it can be referenced this way:

.my-component {
  background-color: var(--color)
}