Possibility to override 'Component' default props

[n44ps]

Hello !

I wanted to know if there is a way to customize components by overriding their props.
Like possibly in a theme file :

{
   Button: {
      radius: 'xl',
      size: 'md',
      fontFamily: 'Space',
   }
}

Currently the only way would be re-creating files :

import { forwardRef, ElementType } from 'react';
import type { ButtonProps, PolymorphicRef } from '@mantine/core';
import { Button as MantineButton } from '@mantine/core';

const Button = <C extends ElementType = 'button'>(
  props: ButtonProps<C>,
  ref: PolymorphicRef<C>,
) => {
  return (
    <MantineButton<C>
      radius="xl"
      size="md"
      ref={ref}
      styles={{
        root: {
          fontFamily: 'Space',
        },
      }}
      {...props}
    />
  );
};

export default forwardRef(Button);

Any advice ?

Thanks :)

[rtivital]

We will be exposing styles api on MantineProvider in 3.1, right now there is no way to do so

[n44ps]

Wow super nice, thank you !

[n44ps]

Hey @rtivital, I saw the new release which is really good ! There's only one thing that is not possible atm, it is to override default props, like size = 'sm' for TextInput.tsx for example.

I would love to do this :

<MantineProvider styles={{
   Button: (theme) => ({
      defaultProps: { radius: 'xl', size: 'md' },
      root: { fontFamily: 'NewFont' }
   }),
 }} />

Also, changing styles to Input component doesn't reflect on other form components like TextInput, Select ...
Is there any plan to handle this ? Thanks ;)

[rtivital]

We cannot support shared Input styles. You can define shared styles and reuse them for all inputs:

const inputStyles = (theme) => ({
  input: {
    backgroundColor: theme.colors.red[5],
  },
});

<MantineProvider
  theme={{ colorScheme: 'dark' }}
  styles={{
    TextInput: inputStyles,
    Textarea: inputStyles,
    Select: inputStyles,
    DatePicker: inputStyles,
  }}
>
  <App />
</MantineProvider>

Overriding default props will be available on MantineProvider theme in one of the next 3.x releases (cannot promise that it will be added soon).

[n44ps]

This is what I ended up doing indeed :)
Okay perfect, I will wait till then. If you need any help, please tell me !

[zgame555]

How to custom color in TextInput ?