Customize a single instance

overview

We want to customize a single instance of a component.

We add props, classes or inline style.

props that work on all Mantine component

Mantine's style props are a set of props that work on all Mantine component, and which set a single style aspect. The style targets the top-level element, not the inner-elements:

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

props that are specific to one or more components

Some props are unique to one or more components. They determine the style or add to the component's inner structure, such as toggling inner-elements. For example, we add a <label> element by adding the label prop to TextInput.

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

how it works, how it resolves

The props, classes and inline style resolve to:

• style that lives in the style attribute
• markers set on the element, such as classes, attributes, or an id, with CSS targeting them.
• inner DOM elements being added.

the limits of the style and className attributes, and of style props

We provide quick inline style in the style attribute or add classes to className, but there is no granularity as to which inner-element we target. The style we provide usually applies to the component's top level element.

Style props are subject to the same constraint: they usually apply to the top level element.

Instead, Mantine recommends the pattern where we can declaratively target inner-elements.

target inner-elements

We target inner-elements by specifying their name, and by providing a style object (styles attribute) or classes (classNames attribute).

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

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

how to name classes (non-CSS module)

This section describes creating CSS classes manually, outside of the CSS module pipeline. Otherwise, see CSS module patterns.

The classes we provide in classNames are to customize an instance. We can think about it as creating a variant of that component, either conceptually or because we actually create a custom component. Either way, we pick a name for that variant and use it in class names that apply to it.

Since we plug classes to the inner elements they apply to, we append the inner element name to the class name for clarity.

.pinkbutton-root
.pinkbutton-label