Per-instance customization

per-instance customization (inline customization)

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

<Button /* customize this very button */></Button>

props that work on all Mantine components

Mantine's style props are props that work on all Mantine components, and which set a single style aspect:

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

Note: The style targets the root element, with no granularity for other inner-elements.

props specific to one or more components

Some props are unique to one or more 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. For each inner-element, we pass either a style object or a set of classes, depending on the pattern picked:

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

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

(fallback) undiscriminated styling with the style or className React props

When providing style with style or className, there is no granularity as to which inner-element we target: the style we provide applies to the component's root element, similar to style props.

class naming patterns (when not using CSS modules)

Since we target inner-elements:

• we add the inner-element's name to the class name,
• we namespace the class with the kind of variant we want to create, such as.pinkbutton-:

.pinkbutton-root {
}
.pinkbutton-label {
}

Note: a cleaner approach is to a create a separate CSS module (PinkButton.module.css), having classes named purely based on inner-elements (such as .label), without a namespace (see CSS module patterns).