材质UI:无法更改主题中的按钮文本颜色

时间:2017-12-14 12:32:04

标签: button colors themes material-ui

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

有人有任何想法吗?

4 个答案:

答案 0 :(得分:8)

解决了!这最终成功了:

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

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

答案 1 :(得分:1)

这对我有用。我们选择的颜色决定采用深色按钮对比色,但选择白色则是对比色看起来更好:

if(driver.findElement(By.xpath(noRecordId)).isDisplayed()){
return true;
}
else{
return false;
}

答案 2 :(得分:1)

此解决方案对我有用

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

答案 3 :(得分:0)

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代替!!!