Customize an instance

customize an instance - overview

We customize a single instance of a component.

We do it by providing some immediate inline style, setting one or more markers, or by providing one or more React props.

Technically, this pattern ultimately resolves to:

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

note: the marker pattern allows to target the element in different states, which the inline style may not.

.primaryButton:hover {
}

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. In that sense we can call them universal props. They translate to style that lives in the style attribute. If the component is made of nested DOM elements, the styles is added to the top-level element.

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

props that are specific to one or more components

Mantine exposes props that are unique to some components or to a single component. Such props may determine the style, or the component's inner structure, such as toggling inner-components. For example, the TextInput's label prop adds a label DOM element in addition to the input element.

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

target an inner-component

We target an inner-component 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
earlymorning logo

© 2025 - All rights reserved

Customize an instance

customize an instance - overview

We customize a single instance of a component.

We do it by providing some immediate inline style, setting one or more markers, or by providing one or more React props.

Technically, this pattern ultimately resolves to:

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

note: the marker pattern allows to target the element in different states, which the inline style may not.

.primaryButton:hover {
}

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. In that sense we can call them universal props. They translate to style that lives in the style attribute. If the component is made of nested DOM elements, the styles is added to the top-level element.

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

props that are specific to one or more components

Mantine exposes props that are unique to some components or to a single component. Such props may determine the style, or the component's inner structure, such as toggling inner-components. For example, the TextInput's label prop adds a label DOM element in addition to the input element.

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

target an inner-component

We target an inner-component 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