MUI - 更改主题中的按钮文本颜色答案

【问题标题】：MUI - Change Button text color in themeMUI - 更改主题中的按钮文本颜色
【发布时间】：2018-05-28 13:12:41
【问题描述】：

我在直接在 MUI 主题中更改按钮文本颜色时遇到问题。更改原色 + 按钮字体大小可以正常工作，因此问题不在于传递主题。这是我的代码：

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，但这也没有效果。

有人有什么想法吗？

【问题讨论】：

标签： reactjs button colors material-ui themes

【解决方案1】：

解决了！这终于成功了：

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

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

【讨论】：

您好，我知道这有点旧（MUI 现在是版本 3+），但我想知道您或任何人是否也这样做（指定确切的组件）只是为了覆盖默认的 MUI 调色板。如果您只想一次更换所有组件，这似乎是一个不必要的步骤！
您还可以为其添加悬停效果以覆盖默认颜色：'white'，添加'&:hover' { background: "#000" }

【解决方案2】：

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

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

【讨论】：

为我工作的按钮。但是芯片上出现错误“材料-UI：不支持white颜色。我们支持以下格式：#nnn、#nnnnnn、rgb()、rgba()、hsl()、hsla()。”因此将其更改为#fff。

【解决方案3】：

这个解决方案适合我

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

【讨论】：

【解决方案4】：

从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 的属性！！！

【讨论】：

感谢您的帮助！你是对的，应该根据可以设置的内容工作（不知道我是怎么错过的） - 但是，由于某种原因，它仍然无法工作......似乎我实际上无法将任何东西传递给“raisedButton” ，甚至不是在“按钮”上工作的字体大小。
我尝试在此处复制说明：material-ui-next.com/customization/themes/… 就像这样：const theme = createMuiTheme({ palette: { primary: lightBlue, }, overrides: { MuiButton: { root: { fontSize: 20, color: 'white', } }, } }); fontSize 部分有效，但颜色仍然不会改变！（在示例中，“color”属性用于字体颜色而不是 textColor）
文档提到 getMuiTheme 而不是 createMuiTheme material-ui.com/#/customization/themes 这似乎将那些特定于组件的组件深度合并到默认主题中，可能会有更好的运气

【解决方案5】：

当您在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],
    },
  },
});

MUI - 更改主题中的按钮文本颜色

现场演示

相关答案