无法样式材料-ui日期选择器确定/取消按钮

Question

我按照此链接中的步骤通过更改主题更改背景颜色材料-ui - > 日期选择器对话框.更改主题改变了背景颜色,但它没有改变OK和CANCEL按钮的颜色.如何改变OK和CANCEL按钮的颜色？

Answer 1

您有两个选项可以自定义"确定"和"取消"按钮的颜色.

1. (更简单)如果你的应用程序中的所有平面按钮都可以使用你想要在日期选择器按钮上使用的相同的自定义颜色,那么你可以简单地添加

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

   你要传递给你的对象getMuiTheme().

2. 如果您只是在这种情况下自定义按钮颜色,并希望应用程序中的其他Flat Buttons采用主题的颜色,那么您需要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
   }