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

Posted 2023-02-22

技术标签:

【中文标题】MUI - 更改主题中的按钮文本颜色【英文标题】：MUI - Change Button text color in theme 【发布时间】：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，但这也没有效果。

有人有什么想法吗？

【问题讨论】：

【参考方案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 - 更改主题中的按钮文本颜色

现场演示

相关答案