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