未定义此类颜色时以靛蓝渲染的 Material-UI 样式组件答案

【问题标题】：Material-UI styled component rendered in indigo when no such color defined未定义此类颜色时以靛蓝渲染的 Material-UI 样式组件
【发布时间】：2019-09-07 21:17:09
【问题描述】：

我正在尝试使用 Material-UI 从我在 https://github.com/phuongnq/nextjs-material-design-boilerplate 找到的样板中汲取灵感来构建一个 NextJS 应用程序。

我的实现可以在https://github.com/amitschandillia/proost/tree/master/web查看。

有问题的样板将默认主题调色板定义为 lightBlue 用于主要和 green 用于次要。但是，它没有为按钮文本颜色明确定义任何内容。默认情况下，所有按钮文本都应为 white，但在渲染时，此代码会显示一个带有 black 文本的 lightBlue 按钮。我的问题是，为什么要更改按钮的默认文本颜色？我可以在代码中的什么位置将其设置为 white？

另外，当我禁用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。我尝试查看整个代码库，但在任何地方都找不到这个定义！

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案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

【讨论】：