Customize a component inline

inline customization

We customize (the given instance of) a component inline, directly where the component is used, so that only this instance is affected, with no side-effect.

styling a DOM element (not Mantine specific)

There are two ways to style a given DOM element:

• provide style in the style attribute
• mark an element with an id, a class, or a custom attribute, and provide style for those in a .css file. Such option allows to provide state-specific style:

.beautifulLink {
}
.beautifulLink:hover {
}
/* .. */

Mantine's role

Mantine's role is to translate the style we provide into style that lives either in the style attribute, or either into a .css file.

Mantine's universal style props

Mantine's style props are a set of props that we may set on any Mantine component. Mantine translates such props into style that lives in the style attribute. If the component is made of nested DOM elements, the styles lives in the top-level DOM element's style attribute.

<Box m={4}></Box>
// translates to
<div style="margin:4px;"></div>

Mantine's component-unique props

Mantine exposes props that are unique to some components or to a single component. Such props may determine the component's structure by enabling inner-components. For example, the TextInput exposes a label prop that will, if provided, add a label DOM element with the provided text:

<TextInput label="Username"></TextInput>
// add a <label> element.
<label>Username</label>

target an inner-component

We target an inner-component by its name, and provide a style object or one or more classes.

styles allows to provide a style object:

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

classNames allows to provide classes:

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

reminder: the benefit of classes is the ability to provide state-specific style.

.primarybutton-root {
}

.primarybutton-root:hover {
}

class naming pattern

We are customizing a Mantine's component, effectively creating a variant. We build the class name with the variant name and the inner-component name.

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