Styles

Most components are designed to inherit the styles of the WordPress Admin interface. Only a few components carry their own custom styles. This ensures that the components will blend seamlessly with WordPress classic admin interface.

However, you can easily customize these components to match your project’s design. This guide will walk you through how to style Kubrick UI components in your WordPress project.

Base styles

To get started, you will need to include the component base styles. These styles provide the foundational styling needed for each component to render correctly and consistently.

Typically, you’ll want to load these base styles before applying any custom styles. Here’s an example:

import { Button, TextField } from '@syntatis/kubrick';
import '@syntatis/kubrick/dist/index.css';
import './app.css';

function App() {
  return (
    <form>
      <TextField
        label="Full name"
        description="Enter your full name"
        />
      <Button />
    </form>
  );
}

Adding a custom class

You can further customize components by passing custom classes through the className prop. These classes are added to the root element of the component, allowing you to easily apply your own styles.

For example:

3 collapsed lines
import { Button, TextField } from '@syntatis/kubrick';
import '@syntatis/kubrick/dist/index.css';
import './app.css';

function App() {
  return (
    <form>
      <TextField
        label="Full name"
        description="Enter your full name"
        />
      <Button className="save-settings" />
    </form>
  );
}

In this example, the save-settings class is applied to the root element of the Button component:

<button class="save-settings">...</button>

You can then use this class in your CSS to customize the button’s appearance:

.save-settings {
  background-color: red;
}

Using static classes

Kubrick UI components also come with built-in static classes that follow the pattern .kubrick-{component}-{selector}. Here, {component} represents the component name, and {selector} refers to a specific part of the component.

These static classes allow you to apply global styles to Kubrick components. For instance, the Button component includes a static class .kubrick-Button-root on its root element, which you can target to style all buttons from the Kubrick library:

.kubrick-Button-root {
  background-color: red;
}

Some components, for example, TextField component, for examples, contains child elements, which includes the label and and the description. You can use the static classes to style these specific parts of a component. To style the label, you can use the following CSS:

.kubrick-TextField-root .kubrick-TextField-label {
  color: red;
}

If you’ve added a custom class on the TextField component, as follows…

3 collapsed lines
import { Button, TextField } from '@syntatis/kubrick';
import '@syntatis/kubrick/dist/index.css';
import './app.css';

function App() {
  return (
    <form>
      <TextField
        className="name-input"
        label="Full name"
        description="Enter your full name"
        />
      <Button className="save-settings" />
    </form>
  );
}

…you can use the static classes with the custom class, instead of using the static root class, .kubrick-TextField-root, to target specific elements more precisely:

.name-input .kubrick-TextField-label {
  color: red;
}

You can find the complete list of static classes in the documentation for each component.