CODEWITHSUNDEEP
reactjsmaterial-ui
Rafay Temp
Rafay Temp

Reputation: 13

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

Upvotes: 0

Views: 205

Answers (2)

Vipul Vivek
Vipul Vivek

Reputation: 161

    .MuiDateTimePickerToolbar-ampmSelection .MuiButton-text span{color: red !important;}

enter image description here .MuiDateTimePickerToolbar-ampmSelection is the class you can target to style AM/PM section.

.MuiDateTimePickerToolbar-ampmSelection .MuiButton-text .Mui-selected { color: red !important;}

This one will target just the current selected between Am and PM.

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.

Upvotes: 1

Mostafa
Mostafa

Reputation: 1

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

Upvotes: 0

Related Questions