styles/performance

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

CSS modules is the most performant styling approach

CSS modules is the most performant way to apply styles because it generates static CSS that is never re-evaluated. 99% of Mantine component styles are generated with CSS modules, meaning components are optimized out of the box. CSS modules is recommended as the primary styling approach for components.

Apply CSS module styles with className and classNames props

To apply CSS module styles to HTML elements, use the className prop. To apply styles to Mantine components, use both className and classNames props.

Inline styles performance tradeoff

Inline styles using the style and styles props are less performant than CSS modules but still performant enough for most cases. Styles are not reused between components; each component generates its own styles. For example, 100 buttons with the same styles will generate 100 style attributes with inline styles but only 1 class with CSS modules. Overusing inline styles increases bundle size and output HTML size. Inline styles have higher specificity than CSS modules, requiring !important or other inline styles to override them.

Style props definition and usage

Style props transform component props into inline styles and have the same performance caveats as inline styles. They are not recommended as the primary means of styling components. Style props are best used to apply 1-3 styles to a component, which does not impact performance.

Responsive style props performance limitations

Responsive style props have worse performance than regular style props because they require injecting a <style /> tag next to the component. It is fine to use responsive style props for several components, but not recommended in large lists. For example, 1000 inputs with responsive margins would generate 1000 separate <style /> tags and should be refactored to use classNames instead.

deduplicateInlineStyles option on MantineProvider

The deduplicateInlineStyles option can be enabled on MantineProvider to automatically share <style /> tags between components with identical responsive styles. This uses React 19 style hoisting to deduplicate and hoist styles to <head />. Deduplication only helps when multiple components share the same responsive style prop values; if every component has unique responsive values, each still requires its own <style /> tag.

deduplicateInlineStyles coverage

Currently, deduplication applies to style props on all components and to responsive props on the Flex component. Components like Grid and SimpleGrid are not yet covered by deduplication.

Components responsive props mechanism

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 several of these components on a page, but not recommended in large lists of components.

Responsive style props in large lists pitfall

Using responsive style props in large lists of components is a performance pitfall. For example, rendering 1000 TextInput components each with responsive mt={{ base: 10, md: 20 }} will generate 1000 separate <style /> tags. It is better to refactor to use the classNames prop instead.

Give your agent this brain