Wrong color applied to link when overriding MUI theme

[garronej]

Wrong color applied to link when overriding MUI theme

[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 @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]

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?