Customize a single instance

per-instance customization (inline customization)

We want to customize a single instance of a component. We do so by adding props, classes or inline CSS.

props that work on all Mantine components

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 root 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 several components. They either determine the style or add to the component's inner structure by toggling inner-elements. For example, TextInput accepts the label prop to add a <label> element to its inner-structure.

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

target inner-elements with styles and classNames

We target inner-elements by specifying their name. We pass either a style object (styles prop) or regular classes (classNames prop).

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

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

(fallback) undiscriminated styling with the style and className React props,

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

name classes manually (not recommended)

The classes we create for use in classNames can be re-used across several instances: we effectively produce a variant of a given Mantine component. We pick a unique name for that variant, and namespace the CSS classes with it, such as .pinkbutton-*.

Since we want to target inner-elements, we add their name:

.pinkbutton-root
.pinkbutton-label