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>
  );
}

For further details, visit this link: https://help.mantine.dev/q/nested-inline-styles