Individual customization

individual customization

We customize (a single instance of) a component.

We do it either by providing some immediate style (inline) or by setting one or more markers (inline) so that it receives the style associated with those markers.

While Mantine allows different ways to set immediate style or to set markers, they ultimately resolve to either:

style that lives in the element's style attribute
a marker set on the element as a class or a custom attribute.
a inner DOM element being added.

The marker allow to target the element in different states.

.primaryButton:hover {
}

props that we may set on any Mantine component

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 determine the component's inner structure, such as toggling inner-components. For example, the TextInput label prop adds a label DOM element.

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

target an inner-component

We target an inner-component by specifying 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",
    }}
/>

class naming pattern

The classes we create and provide in styles are to customize one or more Mantine components. We are effectively creating a Mantine's component variant.

As such, we can name the class with the variant's name we want to create, such as a pinkbutton we are to customize a Button. if we are to discriminate between inner components, we insert their name in the class name.

.pinkbutton-root
.pinkbutton-label

Individual customization