Inline Style variables - V7

[rodeyseijkens]

So I started to tinker with v7, I wondered if there was a way to better handle style overwrites in a css-module.
Because of the inline-style variables I can't easily overwite for example the --button-hover.

.root {
  font-weight: 400;
  ...

  /* The only way to overwrite the variables is with !important */
  --button-hover: linear-gradient(35deg, var(--mantine-color-violet-9), var(--mantine-color-pink-7)) !important;
}

<Button classNames={{ root: classes.root }}>Text</Button>

Also because the .mantine-c33yiTy:hover:not([data-loading]):not(:disabled):not([data-disabled]) css specificity is a pain in the ass to overwrite.

[rtivital]

Override styles instead of CSS variables:

.root {
  &:hover {
    background: red;
  }
}

[rodeyseijkens]

Yea that works but I'm talking about the variables.
For example by applying that &:hover directly it works, but I still need to write the :not([data-loading]):not(:disabled):not([data-disabled]).

When I can just override the --button-hover I have the disabled/loading functionality build in.
And for other components that are maybe more complex, I need to overwrite even more things and nested classes etc.

I get that the --var are set inline because of props, but why not have like the "util" variable --button-hover in the normal button css like --_button-cursor etc?

[rtivital]

You can customize variables with vars in component or use !important

[rodeyseijkens]

So for people having the same question, I ended up setting a custom variant in the themes object and set the var directly there.
And for !important we all know is bad practice, don't use it peeps ;P

[jeroen-hoekstra]

Have similar issues. All I want to set is the --button-color css variable when hovering a button, but it gets overruled by that :not([data-loading]):not(:disabled):not([data-disabled]) part. I find it strange that Button is exposing css variables but you can't really use them in a normal css way.