Невозможно создать материал-ui Выбор даты OK/Отмена кнопки

Question

Я выполнил шаги в этом link, чтобы изменить цвет фона - ui ->Date Picker диалог, изменив тему. Изменение темы изменило цвет фона, но не изменило цвет кнопок OK и CANCEL. Как изменить цвет кнопок OK и CANCEL?

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

Материал-интерфейс использует Flatbutton по умолчанию на DatePicker или для любого диалога. Это означает, что кнопка OK/CANCEL, которую вы видите на datepicker, - не что иное, как плоская кнопка. Таким образом, чтобы применить цвет фона к кнопке OK/CANCEL в списке выбора даты, вы должны использовать цвет вместо primaryTextColor. Атрибут цвета flatbutton меняет цвет фона кнопки. Вы можете найти пример ниже и Screenshot here

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> 
) 
} 

И ниже является то, что материал-UI ожидает стили muiTheme для FlatButton.

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, 
} 

Для получения дополнительной информации о muiTheme стилей каждого компонента материала-UI проверьте следующую ссылку https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js

Я испытал это, и она работала для меня. Надеюсь, что этот ответ будет полезен.