v7 code migration

[stasa-87]

I have simple code snippet that has to be migrated to v7.
It is as simple as changing the anchor color to a little bit darker when hoverd.
So far i have no success. Here is the snippet

const theme: MantineThemeOverride = {
  components: {
    Anchor: {
      styles: (theme, {color: paramColor, ...params}) => {

        const [color = theme.primaryColor, shade = theme.fn.primaryShade()] = paramColor ? paramColor.split('.') : [];

        return ({
          root: {
            '&:hover': {
              color: theme.fn.darken(theme.colors[color][shade], 0.15)
            }
          }
        })
      }
    },
  },
};

[rtivital]

You can reference colors with var(--mantine-color-x-{index}) for example var(--mantine-color-blue-7). To apply styles to components you can still use StylesApi, there you can get theme value both in styles and classNames prop – https://mantine.dev/styles/styles-api/#styles-api-based-on-component-props

[stasa-87]

Thank you for the answer but i tried all of these and they don't work.
With styles api i can't use pseudo-classes like :hover. Quote from documentation

styles prop
styles prop works the same way as classNames, but applies inline styles. Note that inline styles have higher specificity than classes, so you will not be able to override them with classes without using !important. You cannot use pseudo-classes (for example, :hover, :first-of-type) and media queries inside styles prop.

Classnames are useless because as far as i know i can't send the current color from the anchor component to css class. Also i can use custom color that is not even in the list ot mantine theme colors like below example.

<Anchor component={Link} to="#" c="red" >Test</Anchor>
<Anchor fw={500} component={Link} to="#" c="#35439c" >Test</Anchor>

[Arunbaskaran96]

Did you find any solution?