[Link] color cannot be overwritten by styleOverrides
See original GitHub issueDuplicates
- 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
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:5 (4 by maintainers)
Top GitHub Comments
@JanStevens please have a review of the fix. https://github.com/mui/material-ui/pull/32653
I think we can still fix it, will propose a fix soon. But as @hbjORbj mentioned, I am not going to revert the change.