reactjs - How to theme a mantine button? - Stack Overflow

admin管理员组

文章数量:1123379

I want to style a mantine button via theming. But the inline style tag overwrites the theme and the custom hover color. How prevent mantine from using style tag? How to theme the button globally?

<button class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root 
 m_87cf2631 mantine-UnstyledButton-root" data-variant="filled" data-size="sm" 
 type="button" 
 style="
   --button-height: var(--button-height-sm); 
   --button-padding-x: var(--button-padding-x-sm); 
   --button-fz: var(--mantine-font-size-sm); 
   --button-radius: var(--mantine-radius-sm); 
   --button-bg: var(--mantine-color-blue-filled); 
   --button-hover: var(--mantine-color-blue-filled-hover); 
 >  HELLO WORLD  </button>

mantine-theme.ts

const theme: MantineThemeOverride = {

  components: {
    Button: {
      styles: (theme: MantineTheme, params: { variant: string }) => ({
        root: {
          fontWeight: 300,
          ...(params.variant === "outline" && {
            backgroundColor: "red",
            "&:hover": {
              backgroundColor: "green",
            },
          }),
        },
      }),
    },
  },
};

export default theme;

本文标签： reactjsHow to theme a mantine buttonStack Overflow