Material UI - 在主题中更改按钮文本颜色

Question

我在直接更改Material UI主题中按钮文本颜色方面遇到了问题。更改主要颜色和按钮字体大小可以正常工作，因此问题不在于传递主题。以下是我的代码：

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { lightBlue } from 'material-ui/colors';
import styled from 'styled-components';

const theme = createMuiTheme({
  palette: {
    primary: lightBlue, // works
  },
  raisedButton: {
    color: '#ffffff', // doesn't work
  },
  typography: {
    button: {
      fontSize: 20, // works
      color: '#ffffff' // doesn't work
    }
  }
});

const App = ({ user, pathname, onToggleDrawer }) => (
  <MuiThemeProvider theme={theme}>
    ...
  </MuiThemeProvider>
);

我也尝试使用导入的颜色代替#ffffff，但是那也没有任何效果。

有人有什么想法吗？

- jonsbaa

Answer 1

这对我有效。我们选择的颜色决定使用深色按钮对比色，但白色对比色看起来可能更好：

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#46AD8D",
      contrastText: "#fff" //button text white instead of black
    },
    background: {
      default: "#394764"
    }
  }
});

- CodingYourLife

---

对于按钮，这个方法对我有效。但是在芯片上出现了错误。 "Material-UI: 不支持 white 颜色。 我们支持以下格式：#nnn，#nnnnnn，rgb()，rgba()，hsl()，hsla()。" 因此将其更改为 #fff。 - VaibS

Answer 2

搞定了！这最终解决了问题：

const theme = createMuiTheme({
  palette: {
    primary: lightBlue,
  },
  overrides: {
    MuiButton: {
      raisedPrimary: {
        color: 'white',
      },
    },
  }
});

所以，您只需要使用“overrides”，并明确要更改的组件的确切类型。

- jonsbaa

---

你好，我知道这个问题有点旧了（现在MUI的版本已经是3+了），但我想知道是否有人也这样做过（指定确切的组件），以覆盖默认的MUI调色板。如果您只想一次替换所有组件，那么这似乎是一个不必要的步骤！ - esejuanb

你也可以添加一个悬停效果来覆盖默认的白色颜色：在下面的color属性后面添加'&:hover' { background: "#000" }。 - Kapilrc

Answer 3

当你在Button中设置颜色时（例如：<Button color='primary'），文本颜色的应用取决于Button的变体：

• text | outlined：使用主要颜色（例如primary.main）作为文本颜色。

• contained：使用contrastText颜色作为文本颜色，主要颜色作为背景颜色。

import { blue, yellow } from '@mui/material/colors';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: blue[500],
      contrastText: yellow[500],
    },
  },
});

演示现场

相关答案

• 如何在Material UI中更改主要和次要颜色

- NearHuscarl

Answer 4

这个解决方案对我有效。

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      label: {
        color: "#f1f1f1",
      },
    },
  },

- U.A

Answer 5

这对我很有帮助，例如用于自定义success和error颜色:

// themes.ts
import { createTheme, responsiveFontSizes } from '@mui/material/styles';

// Create a theme instance.
let theme = createTheme({
  palette: {
    primary: {
      main: '#F5F5F5',         // Used elsewhere
    },
    success: {
      main: '#11C6A9',         // custom button color (seafoam green)
      contrastText: '#ffffff', // custom button text (white)
    },
    error: {
      main: '#C6112E',         // custom button color (red)
    },
  },
});

theme = responsiveFontSizes(theme);

export default theme;

然后在你的 .jsx/.tsx 文件中，只需声明按钮的 color 属性。

成功按钮：

<Button
  variant="contained"
  color="success"
>
  Success button text
</Button>

而对于带轮廓的红色按钮：

<Button
  variant="outlined"
  color="error">
  Danger button text
</Button>

- Kelsey Hannan

Answer 6

从https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js#L200，你可以看到可以为各种组件设置什么主题，在raisedButton上，你会看到color实际上是按钮的背景颜色，如果要设置文本颜色，你需要改变textColor属性。

const theme = getMuiTheme({
  raisedButton: {
    textColor: '#ffffff', // this should work
    primaryTextColor: '#ffffff' // or this if using `primary` style
  }
});

这并不是很直观，因为CSS的color属性影响的是文本而不是背景，而且它甚至与组件本身的属性http://www.material-ui.com/#/components/raised-button不匹配，后者具有backgroundColor和labelColor等属性！

- alechill

---

感谢您的帮助！你说得对，根据可以设置的内容，那应该是可以工作的（不知道我怎么会忽略了）- 但是，由于某种原因，它仍然没有起作用...似乎我实际上无法传递任何东西到“raisedButton”，甚至连在“button”上工作的字体大小也不行。 - jonsbaa

我尝试复制这里的说明：https://material-ui-next.com/customization/themes/#customizing-all-instances-of-a-component-type 像这样： const theme = createMuiTheme({ palette: { primary: lightBlue, }, overrides: { MuiButton: { root: { fontSize: 20, color: 'white', } }, } }); fontSize部分有效，但是颜色仍然不会改变！（在示例中，“color”属性用于字体颜色而不是文本颜色） - jonsbaa

文档提到了 getMuiTheme 而不是 createMuiTheme http://www.material-ui.com/#/customization/themes这似乎会将那些组件特定的主题深度合并到默认主题中，也许可以尝试一下。 - alechill