我已经能够通过传递自定义muiTheme属性来自定义Material-UI的许多颜色和间距相关属性,但似乎没有与任何按钮的文本颜色相对应的调色板元素具体国家。
在这种情况下,我使用#4275c7的primary1Color作为muiTheme - 并且主按钮文本显示为黑色。鉴于这种原色,白色文本看起来更好,更具可读性。
我已经尝试过设置palette.primaryColor / primaryTextColor,button.primaryTextColor和raisedButton.textColor / primaryColor / primaryTextColor。他们都没有驾驶按钮文字着色。是否存在我缺少的明显属性,或者是否需要不同类型的配置?
供参考,这是我目前的muiTheme宣言:
export const muiTheme = getMuiTheme({
fontFamily: 'Roboto, sans-serif',
borderRadius: 2,
spacing: {
iconSize: 24,
desktopGutter: 24,
desktopGutterMore: 32,
desktopGutterLess: 16,
desktopGutterMini: 8,
desktopKeylineIncrement: 64,
desktopDropDownMenuItemHeight: 32,
desktopDropDownMenuFontSize: 15,
desktopDrawerMenuItemHeight: 48,
desktopSubheaderHeight: 48,
desktopToolbarHeight: 56
},
palette: {
primary1Color: '#4275c7',
primaryTextColor: MaterialColors.white,
primaryColor: MaterialColors.white,
primary2Color: MaterialColors.cyan700,
primary3Color: MaterialColors.grey400,
accent1Color: MaterialColors.pinkA200,
accent2Color: MaterialColors.grey100,
accent3Color: MaterialColors.grey500,
textColor: MaterialColors.darkBlack,
secondaryTextColor: (0, MaterialColorManipulator.fade)(MaterialColors.darkBlack, 0.54),
alternateTextColor: MaterialColors.white,
canvasColor: MaterialColors.white,
borderColor: MaterialColors.grey300,
disabledColor: (0, MaterialColorManipulator.fade)(MaterialColors.darkBlack, 0.3),
pickerHeaderColor: MaterialColors.cyan500,
clockCircleColor: (0, MaterialColorManipulator.fade)(MaterialColors.darkBlack, 0.07),
shadowColor: MaterialColors.fullBlack
},
button: {
height: 45,
// primaryTextColor: MaterialColors.white,
},
// raisedButton: {
// color: MaterialColors.black,
// textColor: MaterialColors.white,
// primaryColor: MaterialColors.black,
// primaryTextColor: MaterialColors.white,
// },
});
这是一个示例凸起的主按钮:
答案 0 :(得分:2)
您使用的是v1吗?如果是这样,主要按钮的文本颜色使用 theme.palette.getContrastText 在组件的样式表中定义:
raisedPrimary: {
color: theme.palette.getContrastText(theme.palette.primary[500]),
backgroundColor: theme.palette.primary[500],
'&:hover': {
backgroundColor: theme.palette.primary[700],
},
},
这会找到与您选择的原色最佳对比的颜色。如果您不想这样做,可以创建一个自定义组件,从override the classes创建自己选择的Button和CSS API。