CODEWITHSUNDEEP
reactjsdatepickermaterial-ui
Oana Maria Teodorescu
Oana Maria Teodorescu

Reputation: 53

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

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:

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

Upvotes: 1

Views: 5793

Answers (2)

Kevin Gilbert
Kevin Gilbert

Reputation: 1022

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

Upvotes: 0

Nghiệp
Nghiệp

Reputation: 4728

You can pass cancelLabel and okLabel props to change the text of the button.

For more information, https://material-ui-pickers.dev/api/DatePicker scroll down to Modal Wrapper section.

Upvotes: 3

Related Questions