[Link] theme styleOverrides overwrites component api prop "color"

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

assume I set

MuiLink: {
    styleOverrides: {
      root: {
       color: '#0068a9', // blue
    },
  },

in the MUI theme components section

and later in my code I want to set some custom colors through Link’s color prop

<Link color='#a8adb3'>grey</Link>

I get a the blue from the theme instead.

I would expect the component prop color to take precedence over the MUILink setting. But it is actually the opposite. When looking at the css in the <style> tag, the colors are set, but apparently the MUI theme settings get appended.

screens from my local example - links should be grey but are blue

BTW this is another interesting bug - styles get appended instead of merged.

Expected behavior 🤔

properties should have precedence over MUI theme settings in order to be able to be able to easily customize

Steps to reproduce 🕹

https://codesandbox.io/s/basicalerts-material-demo-forked-9vjzp8?file=/demo.js

Context 🔦

I’ve implemented the design tokens for the Link component - this would be the default for white background. But our design has also a dark background, where the links are in another color. So the idea was to set either “color” or sx prop, but I wasn’t expecting this

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 12.2.1
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Edge: Not Found
    Firefox: 97.0.1
    Safari: 15.3
  npmPackages:
    @emotion/react:  11.7.1 
    @emotion/styled:  11.6.0 
    @mui/base:  5.0.0-alpha.72 
    @mui/icons-material: ^5.4.2 => 5.4.2 
    @mui/lab: ^5.0.0-alpha.73 => 5.0.0-alpha.73 
    @mui/material: ^5.5.1 => 5.5.1 
    @mui/private-theming:  5.4.4 
    @mui/styled-engine:  5.4.4 
    @mui/styles: ^5.5.1 => 5.5.1 
    @mui/system: ^5.5.1 => 5.5.1 
    @mui/types:  7.1.3 
    @mui/utils:  5.4.4 
    @types/react: ^17.0.16 => 17.0.16 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.3 => 5.3.3 
    typescript: ^4.3.5 => 4.3.5 

[siriwatknp]

Updated the issue title and label since this is a bug on the Link component (not related to system)

[siriwatknp]

@danilo-leal I think misunderstood the Link component (just found out that it inherits Typography) 😢. Let me dig deeper and find what causes the issue.