Direct Genesis component styling

This section covers how to style Genesis components directly, without having to create a new class with custom styles and extend the base.

The advantage of doing this is that it's a lot quicker, and your change can be encapsulated to the particular usage. For example, if you want to change the text colour of the button, you can just set its style directly where you need it; this doesn't change the button across the entire application. However, if you do want to change it across the whole application you can do that to by setting the style at the top level.

The disadvantage of direct styling is that it relies on APIs of the components - the item you wish to customize either needs to have a ::part or use a --css-variable. Most of the time these will be exposed, but where they are not you can extend the component instead to style based on the template directly.

Component libraries

An additional advantage of this approach is that it is component library agnostic - you can use this approach when using Genesis syntax, as well as libraries like React and Angular. The code examples in this section will be shown as pure html and css; you can apply it to whichever component library you are using.