defaultRadius overrides local borderRadius styling

[LeunensMichiel]

What package has an issue

@mantine/core

Describe the bug

Using Remix v1.4.3 and @mantine/core v4.2.2:

I applied local borderRadius styling on a button component. But the css always defaults to the defaultRadius prop defined in MantineProvider's theme prop.

Fixed it by using !important in createStyles, but I don't think that should be the case.

Here's a snippet of my createStyles code

const useStyles = createStyles(
  (theme, { variant }: CustomSharedButtonProps) => ({
    root: {
      height: '3rem',
      padding: '.75rem 1.5rem',
    },
    filled: {
      ...(variant === 'primary' && {
        borderRadius: `${theme.radius.xl}px !important`,
      }),
    },
    outline: {
      ...(variant === 'secondary' && {
        borderColor: 'black',
        color: 'black',
        borderRadius: `${theme.radius.xl}px !important`,
      }),
      ...(variant === 'tertiary' && {
        borderColor: 'gray',
        color: 'gray',
        borderRadius: `${theme.radius.sm}px !important`,
      }),
    },
  }),
);

 <MantineButton
        classNames={{
          root: classes.root,
          filled: classes.filled,
          outline: classes.outline,
        }}
        ref={ref}
        variant={getMantineVariant(variant)}
        {...props}
      >
        {children}
      </MantineButton>

In which browser did the problem occur

Chrome v100

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[rtivital]

I cannot reproduce that on codesandbox – https://codesandbox.io/s/relaxed-engelbart-g08q9s?file=/src/App.tsx

[LeunensMichiel]

Reproduced it by adding a button using the classNames prop (which I'm using)

     <Button classNames={{ filled: useStyles().classes.button }}>
          className radius
     </Button>

[rtivital]

These classes are meant for colors customizations only, you can add radius with root selector