Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – MUI DateTimePicker component styling

I’m working on a project using Material UI (MUI) and specifically the DateTimePicker component from the @mui/x-date-pickers package. I’d like to change the colors of the AM/PM buttons.

MUI often abstracts styling details and that you have to target specific classnames through the sx props, and while I’ve checked the documentation, I haven’t found a clear way to target these buttons for color customization.

Has anyone encountered this before and found a solution to style the AM/PM buttons in MUI’s DateTimePicker? Any guidance or suggestions would be greatly appreciated!

Here is the image of the component I want to style, I have also marked the specific buttons I want to target

Tags:

2

Answers


  1. 0

    I have not used this package, but you can use "multi date picker", it is a powerful tool and has the ability to customize.

    Login or Signup to reply.
  2. 0

    I don’t have a working example right now but .MuiDateTimePickerToolbar-ampmSelection is the class you can target to style AM/PM section.

    https://mui.com/x/api/date-pickers/date-time-picker-toolbar/#classes

    Hope this helps.

    Also given that you are new here as a fellow newbie to StackOverflow I would suggest you create a sandbox or post minimum reproducible code whenever possible. Would allow others to see and debug your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search