Wrong color applied to link when overriding MUI theme

We have a Next.js application that we are in the midst of upgrading from MUI v4 to MUI v5 with react-tss. Part of our theme file is as follows:

MuiLink: {
  styleOverrides: {
    root: {
      color: '#0068b5',
      textDecoration: 'none',
    },
    underlineNone: {
      color: '#f9f9f6',
    },
  },
  defaultProps: {
    underline: 'hover',
  },
},

In MUI v4, this color was correctly applied. However, in MUI v5 with react-tss, our link styles look like this:

It appears that instead of replacing the original color CSS property the new color is simply being added as an additional property. And unfortunately, probably based on the order styles are applied, the wrong color is taking precedence over the desired color. Any ideas here?

[sdornan]

That is the result I’d expect, but not the result I’m getting in my app. I’ll continue to investigate and follow-up here.

Thanks for your help so far!

[garronej]

Hi,
Could you give a try with the latest Next.js, react-dom and React version?