How to customize component variants globally with createTheme in Mantine?

[booandrew]

I want to globally customize the styles for Mantine components using createTheme. For instance, the Button component has filled, light, and outline variants, and my designer provided custom designs for these variants. I need to override the default styles for each variant accordingly. This is similar to what defaultProps provides but applied to specific variants.

What do I have now

 Button: Button.extend({
      defaultProps: {
        size: 'compact-sm',
        px: '16px',
        py: '4px',
        style: { borderRadius: '16px' },
        color: 'background-accent',
      },
    }),

What do I want to get

 Button: Button.extend({
      defaultProps: {
        light: {
          color: 'red',
          bg: 'blue'
          ...
        },
        outline: {
          color: 'green',
          bg: 'red',
          
          ...
        }
      },
    }),

The question can be expanded further: How should components be customized? Not just variants, but also states like hover, focus, active, etc.?

What is the recommended approach in Mantine for handling such customizations at a global theme level?

[rtivital]

https://mantine.dev/styles/variants-sizes/

[mohasinkr]

One small doubt, the docs specify using this syntax:

const theme = createTheme({ components: { Input: Input.extend({ classNames: classes }), } });

and the module.css file has:

.input { &[data-variant='underline'] { border-bottom: 2px solid; border-radius: 0; padding-left: 0; padding-right: 0; ...

how does mantine understand the styling that needs to be applied to the input component. If its from the .input selector, what are the selectors for other components? I'm planning to make a styles.module.css file in the root and use that as a global variant configuration and as such there will several components variants added. @rtivital Kindly help