材质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,但这也没有效果.

有人有任何想法吗？

Answer 1

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

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

Answer 2

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

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

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

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 中的主要颜色和次要颜色

Answer 3

解决了!这最终成功了:

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

因此,您只需使用"覆盖"并明确说明要更改的组件的确切类型.