Inline Customization

Inline customization is when we customize a single instance of a component, inline in code.

universal props

Some props are shared by all components. The style is applied through the element's style attribute.

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

component specific props

Some props are unique to a specific component, or shared by a few components. For example, the TextInput has a label prop. Such props may influence the style or the behaviour.

<TextInput label="Name"></TextInput>

limitation of styling through props

Some complex components are built through a root component that nest inner elements. When we provide style props, Mantine does not know which part of the component we want to style.

For example, setting a universal prop on Slider is ambiguous because Mantine does not know if we target the track or or the knob.

target specific inner-components

We target some inner components explicitely, and provide, for each, some inline style or a set of classes.

the styles prop allows to target some inner components and to provide for each some inline style.

the classNames prop allows to target some inner components and provide for each a set of classes.

This requires knowing the inner components.

The inline style is limited because it cannot target the instance in a specific state such as hover.

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

The benefit of classes is the ability to specify state-specific style, such as hover specific style, and still be able to target a subcomponents.

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

.button-root {
}

.button-root:hover {
}

.button-root:active {
}

.button-label {
}

css module

If we use CSS modules:

<Button
classNames={{
        root: styles.primaryButtonRoot,
        label: styles.primaryButtonLabel,
    }}
  >

If a module.css file aims to style a single component, such as PrimaryButton.module.css, we may use the inner component name as the class name, and provide the entire styles object in classNames

.root {
}

.root:hover {
}

label {
}

import styles from "button.module.css";
<Button classNames={styles}>