CSS modules is the most performant way to apply styles – this approach generates static CSS that is never re-evaluated. 99% of Mantine components styles are generated with CSS modules – components are optimized out of the box.
In most cases, it is recommended to use CSS modules to style your components as well.
You can apply styles to HTML elements with
className prop and to Mantine components with
Applying styles with
Applying styles with
classNames (see Styles API guide to learn more):
Inline styles (
styles props) are less performant than CSS modules, but still
performant enough to be used in most cases if it is your preferred way of styling in your project.
Inline styles caveats:
- Styles are not reused between components, each component will generate its own styles, for example,
if you have 100 buttons with the same styles, CSS modules will generate 1 class for all of them,
inline styles will generate 100
- If inline styles are overused, it can increase bundle size and output HTML size
- Not performance related: inline styles have higher specificity than CSS modules, so if you want
to override inline styles you will have to use
!importantor use another inline styles
Example of inline styles:
Style props transform component props into inline styles. Style props have the same caveats as inline styles, it is not recommended to use them as the primary means of styling your components. Usually, style props are used to apply 1–3 styles to a component – using them this way does not impact performance.
Responsive style props have worse performance than regular style props
because they require injecting
<style /> tag next to the component. It is fine to use responsive
style props to apply styles to several components, but it is not recommended to use
them in large lists of components, for example, if you have 1000 inputs with responsive margins,
it is better to refactor to use
Some components, like SimpleGrid and Grid rely on the same mechanism as responsive style props to apply styles. The limitations are the same – it is fine to use these several of these components on a page, but it is not recommended to use them in large lists of components.