[pickers] How to change mui toolbar date text colour and max width to 1000 about mui-x HOT 14 CLOSED

You can also consider using more specific classes if you want more control over colors:

toolbar: {
  sx: (theme) => ({
    backgroundColor: "#455d7a",
    color: theme.palette.info.main,
    [`& .${pickersToolbarTextClasses.root}`]: {
      color: theme.palette.info.main,
    },
    [`& .${pickersToolbarTextClasses.selected}`]: {
      color: theme.palette.info.light,
    },
  }),
}

from mui-x.

got it ... here is an updated DEMO

Is this what you were looking for?

from mui-x.

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

from mui-x.

@michelengelen Thank you for your assistance. Here is the working example of what I did and what exactly I want.
https://codesandbox.io/p/sandbox/flamboyant-dubinsky-x3lvkn?file=%2Fsrc%2FDemo.tsx

from mui-x.

@michelengelen Exactly this is what I needed. Thank you very much for the help.
I have one more question like can I change the title to something else "Select date range" to something else?

from mui-x.

I don't think it is ... at the very least you would lose the ability to use translations ... @LukasTy is there a way to do this?

from mui-x.

@achoud444 Of course, all the labels are stored in the localization, which you can override.
For the picker toolbars, try specifying this on the LocalizationProvider:

localeText={{
  dateRangePickerToolbarTitle: "Root toolbar title",
}}

or on the Picker component if you want this change to apply to this specific Picker component:

localeText={{
  toolbarTitle: "Picker toolbar title",
}}

from mui-x.

Awesome!!! Thank you very much both of you.

from mui-x.

I'm glad we could resolve your problems. 🙌
I'm closing this issue as all the problems seem to have been resolved. 👌

P.S. Feel free to check the Translated components page and the linked translations interface for all available options.

from mui-x.

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@achoud444: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

from mui-x.

@LukasTy Right now the text is in Captial letters I want to make it in Small
What I can see ROOT TOOLBAR TITLE What I want Root toolbar title`

localeText={{
  dateRangePickerToolbarTitle: "Root toolbar title",
}}

from mui-x.

@achoud444 The uppercase style is coming from the Typography component.
If you need to override this, try adding the following style to the toolbar.sx:

[`> .${typographyClasses.root}`]: {
  textTransform: "unset",
},

from mui-x.

@LukasTy @michelengelen I have a question if you can answer please
Is it better to use the sx property in MUI for styling components, or should I write the CSS in a separate file and override the CSS?

from mui-x.

Is it better to use the sx property in MUI for styling components, or should I write the CSS in a separate file and override the CSS?

@achoud444 I'd say that this is almost a "religious" question. 🙈
If you prefer regular CSS declaration methods—feel free to use them, just be aware that you are responsible for adjusting classes if they ever change on the components. 😉
CSS-in-JS methods provide a more robust API and have the capability to purge unused properties (if you override the property, that is already set on a component—it might be omitted in the final bundle).
You can learn about the performance topic of CSS-in-JS here.
Be aware that if a component is already styled on our components, using sx will not impact the performance in a meaningful way, it's mostly a question for creating new components, where performance is better the closer we go to primitives.

P.S. MUI is working on Pigment CSS, which will mostly negate the performance problems, by extracting CSS at build time.

from mui-x.