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

，但那也没有效果。

有人有什么想法吗？

Answer 1

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

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

Answer 2

解决了！这终于成功了：

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

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

Answer 3

当您在

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 4

这个解决方案对我有用

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

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>

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 -按钮，它有

backgroundColor

和

labelColor

的道具！！！！