This guide will help you understand how to apply styles to Mantine and custom components.
Most of the components provide props that allow you to customize their styles. For example,
Button component has
radius props that control its
These props usually control multiple CSS properties, for example
color and variant props control
border properties. In most cases, changing components props is the most optimal way to customize Mantine components.
Style props work similar to component specific props, but with several differences:
- Style props are not component specific, they can be used with any component.
- Style props always control a single CSS property. For example,
cprop controls CSS
colorprop controls a set of properties:
- Style props are set in
styleattribute. It is not possible to override them with CSS without using
Style props are useful when you need to change a single CSS property without creating a separate file for styles. Some of the most common use cases are:
- Changing text color and font-size
- Applying margins to inputs inside a form:
- Adding padding to various elements:
Note that style props were never intended to be used as a primary way of styling components. In most cases, it is better to limit the number of style props used per component to 3-4. If you find yourself using more than 4 style props, consider creating a separate file with styles – it will be easier to maintain and will be more performant.
Style prop is supported by all Mantine components and allows setting CSS properties as well as CSS variables. It is useful in the following cases:
- You want to apply a single CSS property to a component:
- You want to set a CSS variable based on component prop:
Style prop works the same way as React
style prop. It is not
recommended to use it as a primary way of styling components. In most cases, it is
better to create a separate file with styles – it will be easier to maintain and
will be more performant.
CSS modules is the recommended way of applying most of the styles to Mantine components. CSS modules are the most performant and flexible way of styling components.
- In CSS modules:
- In style props:
- In style prop: