如何使用 Material-UI 更改 React 中链接的颜色？

Question

I'm not able to change the color of a Link inside a Button. When I apply the secondary color to the Button, it doesn't take effect. In other components it does work this way.

<AppBar position='fixed'>
                <Toolbar>
                    <Button color='secondary'>
                        <Link to="/">Home</Link>
                    </Button>
                </Toolbar>
</AppBar>

In App.js I create the custom Theme and wrap it around all components with <ThemeProvider theme={customTheme}>

App.js:

const customTheme = createMuiTheme({
    palette: {
        primary: {
            main: '#36454B',
            contrastText: '#fff',
        },
        secondary: {
            light: '#55dab3',
            main: '#00a883',
            dark: '#007856',
            contrastText: '#000',
        }
    }
});

Answer 1

I'm not able to change the color of a Link inside a Button. When I apply the secondary color to the Button, it doesn't take effect. In other components it does work this way.

<AppBar position='fixed'>
                <Toolbar>
                    <Button color='secondary'>
                        <Link to="/">Home</Link>
                    </Button>
                </Toolbar>
</AppBar>

In App.js I create the custom Theme and wrap it around all components with <ThemeProvider theme={customTheme}>

App.js:

const customTheme = createMuiTheme({
    palette: {
        primary: {
            main: '#36454B',
            contrastText: '#fff',
        },
        secondary: {
            light: '#55dab3',
            main: '#00a883',
            dark: '#007856',
            contrastText: '#000',
        }
    }
});

Answer 2

I know this is old, but you can change the color of all Link objects in the theme using the action object within the theme object (Material-UI v4 and MUI v5):

 palette: {
   primary { ... },
   secondary { ... },
   action: {
      active: lightBlue[200],
      activeOpacity: 1,
      hover: lightBlue[100],
      hoverOpacity: 0.7,
      focus: lightBlue[600],
      focusOpacity: 1,
      selected: lightBlue[300],
      selectedOpacity: 1
    },
    ...