#theme components hover style

2 messages · Page 1 of 1 (latest)

gilded mulch
#

I want to define global styles for some components (for example my button) in my theme.ts file
I'm doing this that work fine except hover style which is never took into account


const THEME: MantineThemeOverride = {
  colors: {
    coral: [
      '#FDEEEC',
      '#F9C9C5',
      '#F7AFA9',
      '#F38A82',
      '#F1746A',
      '#ED5145',
      '#D84A3F',
      '#A83A31',
      '#822D26',
      '#64221D',
    ],
    marble: [
      '#FDFDFD',
      '#FAF9F7',
      '#F8F6F4',
      '#F4F2EE',
      '#F2F0EB',
      '#EFECE6',
      '#D9D7D1',
      '#AAA8A3',
      '#83827F',
      '#646361',
    ],
    oil: [
      '#E7E7E7',
      '#B4B4B4',
      '#8F8F8F',
      '#5C5C5C',
      '#3D3D3D',
      '#141414',
      '#0C0C0C',
      '#090909',
      '#070707',
      '#050505',
    ],
  },
  black: 'oil',
  primaryColor: 'marble',
  primaryShade: 9,
  spacing: {
    xxs: '0.5rem',
  },
  components: {
    Button: {
      defaultProps: {
        variant: 'filled',
        color: 'coral.5',
        radius: 'md',
      },
      styles: {
        root: {
          '&:hover': {
            backgroundColor: 'coral.8',
          },
        },
      },
    },
  },
};

Wondering if is it possible to add hover styles in theme or not