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

【问题标题】：How can I change the color of a Link in React with Material-UI?如何使用 Material-UI 更改 React 中链接的颜色？
【发布时间】：2020-04-05 23:23:36
【问题描述】：

我无法更改按钮内链接的颜色。当我将辅助颜色应用于 Button 时，它不会生效。在其他组件中，它确实以这种方式工作。

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

在 App.js 中，我创建了自定义主题并将其包裹在所有组件周围 <ThemeProvider theme={customTheme}>

App.js：

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

【问题讨论】：

是否需要在 Button 本身上指定 color 属性？链接组件有自己的color 属性，可让您以您想要的方式使用您的主题。

标签： reactjs material-ui react-router-dom

【解决方案1】：

您可以做的是将component={Link} 传递给按钮，因此它将Link 作为其基础组件呈现。请参阅docs。

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

【讨论】：

【解决方案2】：

我知道这是旧的，但您可以使用主题对象（Material-UI v4 和 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
    },
    ...

【讨论】：