search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.11k stars 1.27k forks source link

[pickers] Styling for Calendarpicker, Datepicker, Timepicker, Clockpicker, DateRangepicker #5057

Open Ancmittal opened 2 years ago

Ancmittal commented 2 years ago

Duplicates

Latest version

Summary 💡

Can you suggest some ways to style these CalendarPicker, Datepicker, Timepicker, Clockpicker, DateRangepicker component. As of now we can not styled using theme because these are not the part of BaseTheme

Examples 🌈

const theme = createTheme( { components: { MuiClockPicker: { //not working } } } )

Motivation 🔦

No response

Order ID 💳 (optional)

No response

Bwatermelon commented 2 years ago

I had same question, it looks the Mui-x DatePicker has not been applied to the data grid, so it is hard to style the current CalendarPicker. Here is one of the solution you could have a look. https://codesandbox.io/s/basiceditinggrid-material-demo-forked-wwkhlg?file=/demo.tsx

flaviendelangle commented 2 years ago

I had same question, it looks the Mui-x DatePicker has not been applied to the data grid, so it is hard to style the current CalendarPicker.

Not sure to understand the link between the data grid and the ability to style the CalendarPicker component. @cherniavskii is working to create a doc example in #5053 to display how to use the pickers inside the data grid.

Can you suggest some ways to style these CalendarPicker, Datepicker, Timepicker, Clockpicker, DateRangepicker component. As of now we can not styled using theme because these are not the part of BaseTheme

"Styling" is a broad topic What are you trying to achieve exactly ?

github-actions[bot] commented 2 years ago

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

Ancmittal commented 1 year ago

As an example of styling, I need to make the Clock Picker, and Calendar Picker smaller, in the Date Range Picker I need to change the year functionality in a single click like switching from 2022 to 2023, currently, I need to click 12 times, etc.

On Fri, Jun 10, 2022 at 2:17 PM Flavien DELANGLE @.***> wrote:

I had same question, it looks the Mui-x DatePicker has not been applied to the data grid, so it is hard to style the current CalendarPicker.

Not sure to understand the link between the data grid and the ability to style the CalendarPicker component. @cherniavskii https://github.com/cherniavskii is working to create a doc example in #5053 https://github.com/mui/mui-x/pull/5053 to display how to use the pickers inside the data grid.

Can you suggest some ways to style these CalendarPicker, Datepicker, Timepicker, Clockpicker, DateRangepicker component. As of now we can not styled using theme because these are not the part of BaseTheme

"Styling" is a broad topic What are you trying to achieve exactly ?

— Reply to this email directly, view it on GitHub https://github.com/mui/mui-x/issues/5057#issuecomment-1152128526, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZNJ7CJMA6NXESJDFVAVRATVOL6JNANCNFSM5XNSJAPA . You are receiving this because you authored the thread.Message ID: @.***>

LukasTy commented 1 year ago

Hello @Ancmittal We have recently increased the ability to style pickers significantly. All the styled pickers components allow for their styles being overridden.

You can refer to the themeAugmentation to find out all the components, which can have their styles overridden (P.S. never type in overrides file means no possible elements to override styles for).

Please refer to documentation for ways to use theme overriding with TS.