Question

我正在尝试从我在https://github.com/phuongnq/nextjs-material-design-boilerplate找到的样板创建具有Material-UI绘图灵感的NextJS应用。

我的实施情况可以在https://github.com/amitschandillia/proost/tree/master/web进行审核。

有问题的样板将默认主题调色板定义为主要的 lightBlue 和次要的 green 。但是，它没有为按钮文本颜色明确定义任何内容。默认情况下，所有按钮文字应为白色，但是在呈现时，此代码显示带有黑色文字的 lightBlue 按钮。我的问题是，为什么要更改按钮的默认文本颜色？我可以在代码的哪里将其设置为白色？

此外，当我禁用lib/getPageContext.js中的调色板定义部分时：

const theme = createMuiTheme({
    palette: {
        // primary: {
        //     light: lightBlue[300],
        //     main: lightBlue[500],
        //     dark: lightBlue[700],
        // },
        // secondary: {
        //     light: pink[300],
        //     main: pink[500],
        //     dark: pink[700],
        // },
    },
});

我在 indigo 中得到了主按钮，而不是 lightBlue 的预期默认值。我尝试浏览整个代码库，但在任何地方都找不到该定义！

Answer 1

文本颜色由主题中的contrastText颜色控制。如果未明确指定，则Material-UI会提供一种算法，用于确定是将黑色还是白色用作给定背景色的文本颜色。

您可以在我的答案中找到语法示例：Text color not working in Material-UI Theme

您可以在此处找到有关它的文档：https://material-ui.com/customization/themes/#palette

关于您的第二个问题，可以在这里找到控制default theme颜色的代码：https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createPalette.js#L81

当未定义颜色时，使用Material-UI样式的组件以靛蓝呈现

1 个答案: