通过 Material UI 主题更改辅助按钮文本颜色

Question

我在我的应用程序中同时使用了主按钮和辅助按钮。似乎默认情况下主按钮的颜色是白色，这很好。但我需要我的辅助按钮颜色也是白色，但事实并非如此。

这是我的代码目前的样子：

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#FF0000'
        },
        secondary: {
            main: '#00FF00'
        },
        // Probably unrelated? But tried anyway...
        text: {
            primary: '#FFFFFF',
            secondary: '#FFFFFF'
        }
    },
    // Can override primary's text color from here, but no clue how to
    // do so with the secondary
        MuiButton: {
            text: {
                color: '#FFFFFF'
            }
        }
});

// ...
// In my component:
// Expected both buttons to have white text color, however secondary has black text. Need to override this so that both buttons have the same text color.

function MyComponent () {
    return (
        <ThemeProvider theme={theme}>
            <Button color='primary'>Primary</Button>
            <Button color='secondary'>Secondary</Button>
        </ThemeProvider>
    )
}

编辑：我确实注意到按钮的文本颜色似乎与其背景颜色相关联。因此，如果我将主按钮和辅助按钮都设置为相同的颜色，则它们的背景颜色将默认为相同的。尽管如此，我的问题仍然存在，我该如何控制呢？主要针对二级按钮？

Answer 1

您可以按照下面设置对比文字

const theme = createMuiTheme({
    palette: {
        primary: {
            main: "#FF0000",
            contrastText: "#ffffff",
        },
        secondary: {
            main: "#00FF00",
            contrastText: "#ffffff",
        },
    },
});

通过 Material UI 主题更改辅助按钮文本颜色

Change Secondary button text color through Material UI Theme

reactjs

material-design

material-ui