英文:
material ui theme palette does not apply the primary color to the primary button background color
问题
我想设置主颜色，这是所有 Material UI 控件的背景颜色。
const theme = createTheme({
palette: {
primary: {
main: '#00629A'
},
},
});
发生的情况是按钮的背景始终是透明的，文本颜色应用了主值！我做错了什么？
当我检查该网站：https://zenoo.github.io/mui-theme-creator/#Buttons
并更改主颜色时，它会影响所有控件的背景颜色！
<details>
<summary>英文:</summary>
I want to set the primary color which is the ****background** color** for all material ui controls
const theme = createTheme({
palette: {
primary: {
main: '#00629A'
},
},
});
<ThemeProvider theme={theme}>
<Button>Import</Button>
</ThemeProvider>
What happens is that the button background is always transparent and the **text color** is getting the main value applied!?
What do I wrong?
[![enter image description here][1]][1]
When I check that Site: https://zenoo.github.io/mui-theme-creator/#Buttons
and I change the primary color it affects all controls background color!
[1]: https://i.stack.imgur.com/GmnJ8.png
</details>
# 答案1
**得分**: 0
根据[文档][1]：
> 基本按钮
>
> 按钮有三个变种：文本（默认）、包含和轮廓。
> 文本按钮
>
> 文本按钮通常用于不太显著的操作，包括位于：对话框中，卡片中。在卡片中，文本按钮有助于保持对卡片内容的强调。
> 包含按钮
>
> 包含按钮是高强调的，通过其使用高程和填充来区分。它们包含对您的应用程序至关重要的操作。
所以您的代码按预期运行。
如果您需要将背景颜色更改为主要颜色，您应该将 `variant` 设置为 `contained`，如下所示。
```jsx
<Button variant="contained">导入</Button>
如果您需要更改所有按钮，您可以使用 components 属性。
例如：
const theme = createTheme({
palette: {
primary: {
main: "#00629A"
}
},
components: {
MuiButton: {
defaultProps: {
variant: "contained"
}
}
}
});
您可以在这里看到整个示例。
英文:
According to documentation:
> Basic button
>
> The Button comes with three variants: text (default), contained, and
> outlined.
> Text button
>
> Text buttons are typically used for less-pronounced
> actions, including those located: in dialogs, in cards. In cards, text
> buttons help maintain an emphasis on card content.
> Contained button
>
> Contained buttons are high-emphasis, distinguished by
> their use of elevation and fill. They contain actions that are primary
> to your app.
So your code is working as expected.
If you need to change background color to primary color, you should set variant to contained like this.
<Button variant="contained">Import</Button>
If you need to change all buttons, you can use components prop.
For example:
const theme = createTheme({
palette: {
primary: {
main: "#00629A"
}
},
components: {
MuiButton: {
defaultProps: {
variant: "contained"
}
}
}
});
You can see the whole example here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论