如何使用 Material-UI 更改 React 中鏈接的顏色？

Question

我無法更改按鈕內鏈接的顏色。 當我將輔助顏色應用於 Button 時，它不會生效。 在其他組件中，它確實以這種方式工作。

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

在 App.js 中，我創建了自定義主題並使用<ThemeProvider theme={customTheme}>將其包裹在所有組件周圍

應用程序.js：

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

Answer 1

我無法更改按鈕內鏈接的顏色。 當我將輔助顏色應用於按鈕時，它不會生效。 在其他組件中，它確實以這種方式工作。

<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',
        }
    }
});

Answer 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
    },
    ...