我在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,但这也没有效果。
有人有任何想法吗?
答案 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
代替!!!