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