[DateTimePicker] Can't change the color for the tabs

[sanjitchh]

Related page

https://mui.com/x/react-date-pickers/custom-components/

Kind of issue

Missing information

Issue description

I wanted to change the color for the Date Time Picker tabs that let us switch between the date and the time sections of the picker. There is no clear explainantion for how to to it. I cannot add sx to the tabs in the slotprops and adding the class somewhere else is also not working.

Context 🔦

No response

Search keywords: DateTimePicker tab color

[LukasTy]

Thank you for reporting this problem! 🙏
I can confirm that there is an issue here, at a minimum this component should support className and sx prop.
The classes prop is technically optional because it only contains a root slot.
At the same time, we should add the missing classes prop to the DateTimePickerToolbar.

[iamabhshk]

Can I look into this? @LukasTy

[LukasTy]

Can I look into this?

Feel free to work on it. 👍
Just to let you know, we have not groomed this issue yet, thus, the information might not be complete. 🤔

[iamabhshk]

I analyzed the code and here's what I found.

In the above screenshot, we are using a 'ToggleButtonGroup' component and it has a color property. In order to change the color we can replace the 'primary' with these options: ['secondary'| 'error' | 'info'| 'success'| 'warning']
For details you can refer to this link https://mui.com/material-ui/api/toggle-button-group/

I hope this is what you were seeking if my understanding to your issue was correct.

[LukasTy]

@iamabhshk If we are talking about building your own "DatePicker" various subcomponents - then sure, your example makes sense, but in this case the problem is different.
The issue author is expecting the ability to provide styling props to the DateTimePickerTabs component. 😉

[sanjitchh]

@LukasTy @iamabhshk Hey! Sorry for not providing more context. I was talking about the color of the tabs of the DateTimePicker component that we get when we have tabs: {hidden: false} in the slotProps. I was looking to customize the the tab colors separately using sx as i have done for day but the tabs slotProp currently does not support sx.
I have attatched the image of my code and the tabs I am talking about.

[iamabhshk]

Ohh I see, now I am clear. Let me try it and will let you know.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @sanjitchh?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.