[material-ui][DatePicker] Change @material-ui/pickers Ok/Cancel dialog buttons text color for DatePicker/TimePicker/DateTimePicker

user_8866897 0
Viewed 3450

Is there any way to change the text color for the Ok/Cancel dialog buttons from the @material-ui/pickers DatePicker/TimePicker/DateTimePicker? I have managed to change other elements using overrides, but cannot find the theme selectors for the bottom buttons.

Here is a code sandbox: https://codesandbox.io/s/material-ui-pickers-411qz?file=/demo.js

I tried using:

  • MuiDialogActions in the createMuiTheme, but cannot select the buttons, only the panel gets styled
  • withStyles for the buttons for DatePicker
  • a separate ThemeProvider for different flat button styling for TimePicker

None worked. I would like a solution for the buttons other than changing the primary color for all elements.

material-ui reactjs datepicker
2 Answers
user_26071770

I was using okText and cancelText props but they got removed. I found an easy way to change the translations of these buttons on your MUI Theme.

createTheme (
  {
    //...
  },
  {
    components: {
      MuiLocalizationProvider: {
        defaultProps: {
          localeText: {
            cancelButtonLabel: 'My custom cancel button label',
          },
        },
      },
    },
  }
)
user_130134140
Related