How can I change the color of a Link in React with Material-UI?

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

What you can do is pass component={Link} to button, so it will render the Link as it base component. See the docs.

<Button color='secondary' href="/" component={Link}>
    Home
</Button>