Working with classes

In general, you shouldn't need to touch classes in Nova. Most of the CSS is compiled ahead of time using CSS Modules and automatically merged into each component dynamically.

Add a class using JSX

In some cases, you'll need to override this rule for third party scripts. In those cases, use a component prop to clearly indicate the class usage and requirements.

Example ref (opens in a new tab)

const Button = ( {
  hasRecaptcha = false,
} ) => {
  return (
    <div
      className={ `${ styles.button } ${
        hasRecaptcha ? '"pmc-recaptcha-enterprise-form"' : null
      }` }
    />
  );
};

Add a class using PHP

The base class for component Models (opens in a new tab) includes support for a array $class_names property.

Using this property, you can hook into the classNames object that renders every component.

Refer to the "understanding CSS Module structure" documentation for additional information.

Using the property

Setting class_names on a model,

$model = new Model();
$model->class_names = [ 'main' => 'example-class-for-main' ];

Will automatically merge with the CSS Modules classes,

<div class={ classNames.main } />

And render as one class property.

<div class="_generated--css-modules--class example-class-for-main" />