Customize an instance

overview

We want to customize a single instance of a component.

We do that by adding inline style, classes, or provide props.

inner workings

Technically, this pattern resolves to:

• style that lives in the element's style attribute
• markers set on the element, such as a class, an id, an attribute or a custom attribute, along with some CSS targeting those markers.
• inner DOM elements being added.

the limits of setting style or className attributes directly

We may provide quick inline style in the style attribute or classes to the className attribute, but there is no granularity into which inner-element we target. The style we provide usually applies to the root inner-element.

While this is possible, it's not a pattern recommended by Mantine, because it doesn't let Mantine act as an intermediary.

mantine patterns

Mantine offers patterns that are more powerful, and for them, allow to target inner-elements.

props that we may set on any Mantine component instance.

Mantine's style props are a set of props that we may set on any Mantine component, and which aim to set a single style aspect. The style targets the top-level element.

<Box m={4}></Box>

props that are specific to one or more components

Some props are unique to some components. They may determine the style, but also determine the component's inner structure, such as toggling inner-elements. For example, the TextInput's label prop adds a label element in addition to the input element.

<TextInput label="Username"></TextInput>
// adds:
<label>Username</label>

target an inner-element

We target an inner-element by specifying its Mantine-defined name, and provide a style object (styles pattern) or one or more classes (classNames pattern).

 <Button
	styles={{
        root: { backgroundColor: 'red', height: 16},
        label: { color: 'blue' },
      }}

<Button
    classNames={{
        root: "primarybutton-root",
        label: "primarybutton-label",
    }}
/>

class naming pattern

The classes we provide in styles are to customize an instance of a given Mantine component. But we may wrap the instance into a new component, effectively creating a variant of the given Mantine component.

Given that, we may use the variant's name in all classes related to it, as a prefix, such as pinkbutton-* if we are making a Button variant. if we are to target an inner component, we use its name as a suffix.

.pinkbutton-root
.pinkbutton-label