Wrong color applied to link when overriding MUI theme

[sdornan]

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?

[garronej]

Hi @sdornan,
This is a problem with MUI, not TSS react.
You could stop using tss-react you'd still get the same behavior.
TSS enables to override your custom components's default styles. But it has no power over the MUI's component.

There is an ongoing PR in MUI that, I think, will fix this. See: mui/material-ui#32067

[sdornan]

Thanks for the pointer! In that case, this can be closed.

[garronej]

Hi @sdornan,
Yet, if you could give me some aditional information.
Is:

Your primary collor in your MUI theme?

If yes, are you using MUI link like this

import Link from "@mui/material/Link";

<Link href="#" color="primary">Foo bar</Link>

If not, where does the geenish color come from?

[sdornan]

Correct, the green color is my primary color in my theme.

Since I am using Next.js, I'm using my own Link component that was adopted and customized from the Link component here: https://github.com/mui/material-ui/blob/master/examples/nextjs-with-typescript/src/Link.tsx

Here's the component: https://gist.github.com/sdornan/ca308046d76b766758a157c1174bbe14

[garronej]

@sdornan,
I know there are issues in MUI with the CSS priority but with this particular component (<MuiLink/>) I was unable to reproduce.
The priority of the styleOverrides are supposed to be very low.
If I run this code:

import * as React from 'react';
import Link from "@mui/material/Link";
import { createTheme, ThemeProvider } from '@mui/material/styles';
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { useStyles } from "tss-react/mui";

export const muiCache = createCache({
  "key": "mui",
  "prepend": true
});

const theme = createTheme({
  "components": {
    "MuiLink": {
      "styleOverrides": {
        "root": {
          "color": "green",
        },
      },
    },
  }
});

function TestComponent() {

  const { css } = useStyles();

  return (
    <React.Fragment>
      <Link href="https://example.com" >This text should be green (from theme override)</Link>
      <Link href="https://example.com" color="secondary"  >This text should be purple (from prop secondary)</Link>
      <Link href="https://example.com" color="secondary" className={css({ "color": "pink" })}>This text should be purple (from className)</Link>
    </React.Fragment>
  );

};

render(
    <CacheProvider value={muiCache}>
      <ThemeProvider theme={theme}>
        <TestComponent />
      </ThemeProvider>
    </CacheProvider>
);

I get this:

Which is what I expect.
Are you expecting something else?

[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!

[sdornan]

If I do

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

then the styles are as I expect:

If I add back the commented out lines, then I get the doubled up color and text-decoration again. So I guess this is the solution I'll go with. I haven't had a chance to try to reproduce in a more minimal Next.js environment, but perhaps it's some sort of SSR issue.

[garronej]

Are you using react 18?

[sdornan]

React 17.0.2

[garronej]

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