无法设置材质-ui 日期选择器确定/取消按钮的样式

Question

我按照此link中的步骤通过更改主题来更改背景颜色material-ui --> Date Picker对话框。更改主题更改了背景颜色，但没有更改“确定”和“取消”按钮的颜色。如何更改“确定”和“取消”按钮的颜色？

Answer 1

您有两个选项来自定义“确定”和“取消”按钮的颜色。

1. （更简单）如果您同意应用程序中的所有平面按钮使用与您的日期选择器按钮相同的自定义颜色，那么您只需添加

   flatButton: {
       primaryTextColor: purple500, // Whatever color you want.
   }
   

   到您传递给

   getMuiTheme()

   调用的对象。

2. 如果您在这种情况下仅自定义按钮颜色，并且希望应用程序中的其他平面按钮采用主题颜色，那么您需要在使用

   muiTheme

   之前自定义

   DatePicker

   。

   因此，如果我们希望所有平面按钮都为

   cyan500

   ，那么我们会将其设置为我们的主

   const mainMuiTheme = getMuiTheme({
       flatButton: { primaryTextColor: cyan500 }
   })
   
   const WrapperWithMainThemeProvider = (props) => {
       return (
           <MuiThemeProvider muiTheme={mainMuiTheme}>
               <MyDatePicker />
           </MuiThemeProvider>
       )
   }
   

   然后，如果想要自定义

   DatePicker

   中的按钮，那么我们可以在自定义组件中进行操作。

   class MyDatePicker extends React.class {
       render() {
           const muiTheme = getMuiTheme({
               ...this.context.muiTheme,
               flatButton: {
                   primaryTextColor: purple500,
               }
           })
   
           // Customize the muiTheme, and pass it down in a new MuiThemeProvider.
           // Only Flat Buttons that are children of this component 
           // will have the new color.
           return (
               <MuiThemeProvider muiTheme={muiTheme}>
                   <DatePicker />
               </MuiThemeProvider>
           )
       }
   }
   
   MyDatePicker.contextTypes = {
       muiTheme: React.PropTypes.object.isRequired
   }
   

Answer 2

Material-UI 使用 Flatbutton 作为日期选择器或任何对话框的默认按钮。这意味着您在日期选择器上看到的“确定/取消”按钮只不过是一个平面按钮。因此，要将背景颜色应用于日期选择器的“确定/取消”按钮，您必须使用颜色而不是primaryTextColor。 flatbutton 的 color 属性确实会改变按钮的背景颜色。请查找下面的示例和

import DatePicker from 'material-ui/DatePicker';

const mainMuiTheme = getMuiTheme({
flatButton: { color: '#333' }
})

const WrapperWithMainThemeProvider = (props) => {
return (
    <MuiThemeProvider muiTheme={mainMuiTheme}>
        <DatePicker
          floatingLabelText="Date Of Birth" 
          hintText="Select Date Of Birth" 
          container="inline" 
          locale="en-US" 
          firstDayOfWeek={0} 
          autoOk={true} 
          value={this.state.dob} 
          onChange={this.changeDateOfBirth} 
          defaultDate={this.state.dateYesterday}
      >
      </DatePicker>
    </MuiThemeProvider>
)
}

下面是 Material-UI 对 FlatButton 的 muiTheme 样式的期望。

 flatButton: {
  color: transparent,
  buttonFilterColor: '#999999',
  disabledTextColor: fade(palette.textColor, 0.3),
  textColor: palette.textColor,
  primaryTextColor: palette.primary1Color,
  secondaryTextColor: palette.accent1Color,
  fontSize: typography.fontStyleButtonFontSize,
  fontWeight: typography.fontWeightMedium,
}

有关每个材料 UI 组件的 muiTheme 样式的更多信息，请检查以下链接 https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js.