Back to all questions

Can I use nested inline styles with Mantine components?

Last updated

What are nested inline styles?

Nested inline styles are commonly used in CSS-in-JS libraries like emotion. Nested inline styles syntax looks something like this (example from emotion documentation):

render(
  <div
    css={{
      backgroundColor: 'hotpink',
      '&:hover': {
        color: 'lightgreen',
      },
    }}
  >
    This has a hotpink background.
  </div>
);

Styles in Mantine components

Mantine components do not support nested inline styles out of the box. The following example will not work:

import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button
      style={{
        // ✅ This works
        backgroundColor: 'hotpink',

        // ❌ This does not work
        '&:hover': { color: 'lightgreen' },
      }}
      styles={{
        root: {
          // ✅ This works
          backgroundColor: 'hotpink',

          // ❌ This does not work
          '&[data-disabled]': { color: 'lightgreen' },
          '&:hover': { color: 'lightgreen' },
          '&:focus': { color: 'lightgreen' },
          '& span': { color: 'lightgreen' },
        },
      }}
    >
      This has a hotpink background.
    </Button>
  );
}

Why nested inline styles are not supported?

Mantine does not use CSS-in-JS library for styling – all styles are either in CSS files or inline in the style attribute which does not support nested styles. Mantine does not use CSS-in-JS to keep bundle size small, provide support for server-side rendering and improve performance. You can learn more about performance in the styles performance guide.

What is the alternative?

You can use nested selectors in CSS files:

.button {
  background-color: hotpink;

  &:hover {
    color: lightgreen;
  }
}

To learn more about styles in Mantine, follow CSS modules, PostCSS preset and Styles API guides.

I still want to use nested inline styles

Mantine has support for emotion. To set it up, follow emotion installation guide. Note that this will increase bundle size and will affect performance.