Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Link] color cannot be overwritten by styleOverrides

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When using MuiLink with a specific color we are unable to overwrite the color in styleOverrides.

<Link color="primary" variant="overline">Very cool Link</Link>

// extracted from our theme
{
  palette: {
    primary: {
      main: '#fff'
    },
    text: {
      tertiary: '#000'
    },
  },
  components: {
    MuiLink: {
      styleOverrides: {
        root: ({ theme, ownerState }) => ({
          ...(ownerState.color === 'primary') && {
            color: theme.palette.text.tertiary
          }
        })
      }
    }
  }
}

The result is that the link is white instead of black, we use a lot of different colors and mainly use the color attribute on components to map to specific variants or “styles” of components.

I think this is because of https://github.com/mui/material-ui/issues/31857 and https://github.com/mui/material-ui/pull/32045

Expected behavior 🤔

That color behaves the same as color on MuiButton, this allows you to pass primary but still overwrite the color in styleOverrides. Right now it’s impossible to overwrite.

The fix of https://github.com/mui/material-ui/pull/32045 should be reverted, if you want to use a different color us the sx prop instead. Probably renaming color to something less confusing would help in the long run. Also passing arbitrary hex colors in color should not be supported, rather only theme colors should be allowed (as it is with button)

Steps to reproduce 🕹

See https://codesandbox.io/s/infallible-fog-n15fl3?file=/src/Demo.tsx

Context 🔦

To stay consistent in v5 MuiLink color should behave the same as MuiButton. When overwriting a specific instance you should use sx explicitly so color can still be used to indicate a different brand. Instead of coupling it directly to your palette colors. This limits the extensibility of Mui greatly.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.13.0 - ~/.asdf/installs/nodejs/16.13.0/bin/node
    Yarn: 1.22.18 - ~/.asdf/installs/nodejs/16.13.0/.npm/bin/yarn
    npm: 8.5.5 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Not Found
    Firefox: 98.0.2
    Safari: 15.4
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.79 
    @mui/icons-material:  5.5.1 
    @mui/lab: 5.0.0-alpha.80 => 5.0.0-alpha.80 
    @mui/material: 5.6.4 => 5.6.4 
    @mui/private-theming:  5.5.3 
    @mui/styled-engine:  5.6.1 
    @mui/styles:  5.5.1 
    @mui/system:  5.6.4 
    @mui/types:  7.1.3 
    @mui/utils:  5.5.3 
    @mui/x-date-pickers: 5.0.0-alpha.2 => 5.0.0-alpha.2 
    @types/react: 17.0.43 => 17.0.43 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: 4.6.3 => 4.6.3