Is there an easy and quick way to modify these colors?
Thanks in advance
By the documentation from Ant Design,
popupStyle | The style of panel | CSSProperties
you could use popupStyle as a prop and just use normal CSS to style timepicker.
or
you could use popupClassName, popupClassName={classes.timepicker}
timepicker: {
"& .ant-picker-footer": {
color: "#your color",
},
}
you could find the correct className in dev tools.
Edit:
Here is a simple method with the use of className .
className="timepicker-background"
and in CSS we have,
.timepicker-background {
background-color: rgb(26, 25, 29);
border-color: rgb(247, 30, 30);
}
Here is another method with the use of popupStyles
popupStyle={{ fontSize: 30 }}
Demo in Codesandbox
Related
As a test, I used a autocomplete (country select) from the official MUI.com autocomplete documentation.
https://mui.com/material-ui/react-autocomplete/
Here is also the code sandbox for the country select:
https://codesandbox.io/s/x1q340?file=/demo.tsx
The country select autocomplete should look like this:
MUI country select from official website
But when I am testing my code in a React/Inertia project of mine, it looks like that (with exactly the same code):
MUI country select in my project
The blue input box should not be there at all. All experiments to remove it somehow failed.
Both the sandbox and the project use the same latest MUI Version. Any idea where the box could come from?
I expected that, when I am using the same code, I should get the same result, but I did not.
So I tried to modify a theme and change the outline of any input content like this:
MuiOutlinedInput: {
styleOverrides: {
root: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "gray"
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "black"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
},
}
}
},
But the result was that the color of the outer border changed from blue to green, but not the inner one.
Try to fix
I want to change the color of the label circled here:
How would I go about doing so?
I have tried changing the color of the primary colors on the palette. Also, there does not seem to be a way to do it through CSS without affecting other components.
Here's my current code for the theme:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
day: {
color: "#436E70",
},
daySelected: {
backgroundColor: "#436E70",
},
dayDisabled: {
color: "#436E70",
},
current: {
color: "#436E70",
},
},
},
});
Material-UI pickers v3.3.10
https://material-ui-pickers.dev/guides/css-overrides
Variant: static
Npm package used: #material-ui/pickers
Someone suggested this post: Change header color of Material-UI Date Picker
That solution is 5+ years old already,getMuiTheme is not part of v3.3.10. Also the way described in that post does not work anymore, it does not matter where in the createMuiTheme object I put
datePicker: {
color: palette.primary1Color,
textColor: palette.alternateTextColor,
calendarTextColor: palette.textColor,
selectColor: palette.primary2Color,
selectTextColor: palette.alternateTextColor,
calendarYearBackgroundColor: palette.canvasColor,
headerColor: palette.pickerHeaderColor || palette.primary1Color,
},
It does not work, it doesn't have any effects. And the documentation also doesn't bring much light to the case.
Thanks in advance.
According to the documentation from your link the datepicker has a rule (sometimes called slot) called MuiPickersCalendarHeader. This rule is used to provide styling to a <div> tag that is an ancestor to the <p> tag that contains the text you've circled in your sample image (i.e. "July 2022"). You can see how these tags are structured in the Inspector tab of the Developer Tools Window in Firefox (in the browser highlight the text "July 2022", right-click the highlighted text, then from the context menu choose Inspect). Knowing the tag structure, we can apply a CSS selector to target the <p> tag like so:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
...
// MuiPickersCalendarHeader rule
MuiPickersCalendarHeader: {
switchHeader: {
['& > div > p']: {
// backgroundColor: lightBlue.A200,
// color: "white",
},
},
},
...
}
}
The above code is untested. If you have problems with it say so in a comment, and I'll try to test it.
I have the following configuration in the antd.customize.less file:
#btn-primary-bg: #ffe900;
#btn-primary-color: #primary-color;
#btn-default-color: #primary-color;
#btn-default-bg: #ffffff;
On hovering a primary button everything is ok, but on hovering a default button the text color in the button changes to #btn-primary-bg, which I want to override, but I couldn't find any property like "#btn-default-hover-color" here. How can this be overridden, if at all?
I faced the same issue but I'm still looking for a better solution. However, for the moment, I can suggest that you add something like this to your global style file:
.ant-btn-default:hover, .ant-btn-default:focus {
border-color: #bee2e5;
color: #fff;
}
UPDATE
After antd has been updated to version 5.0.0 there is a prettier way to do it using ConfigProvider.
Let's suppose we have wrapped our App and assigned to the theme an object with parameters.
<ConfigProvider theme={{
components: {
Button: {
colorPrimaryBorderHover: 'red',
colorPrimaryHover: 'lightgray',
colorPrimary: 'red',
colorPrimaryActive: 'lightgray',
colorPrimaryTextHover: 'lightgray',
}
}
}}>
<App />
</ConfigProvider>
Acctually there are a lot of parameters to customize the appereance of your app which you can find in your
node_modules/antd/es/config-provider/context.d.ts file
However your config might be huge but to keep your code readable you might pass this object with interface of ThemeConfig as an exported value from another .ts file.
<ConfigProvider theme={myCustomTheme}>
...
Working with reassigning less variables. Thied to edit everything that connected with #primary-color, nothing changed color generated by Antd for hover/active state. Looks like there is no way to do this with less variables.
Hi, I am trying to remove the background of autocomplete. but did not manage. I managed to changed color but now I can't see the text input.
the image above show the problem . as you can see its override on the label.
input: {
color: '#A5AEB3',
"& .MuiOutlinedInput-notchedOutline": {
color:'#000000',
backgroundColor: muiTheme.palette.background.default
},
I'm trying to create a class specificity in Material UI Next same way as they allow you to use pseudo classes, but for nested elements. For example, in Material UI Next (MUI-Next) I can create a class with styles in it:
const styles = {
appbar: {
background: '#6d6146',
'&:hover': {
background: '#9e8e6a',
},
},
};
and use it this way
<Toolbar className={classes.appbar}>
... blah blah blah
</Toolbar>
That paints my Toolbar element in color #6d6146 and hovers to #9e8e6a.
Now, if imagine I have some elements inside the Toolbar and I don't want to create a class for every single element in it. (especially if they are not MUI-Next elements, but some custom HTML) For the sake of an example, a hyperlink. Like this:
<Toolbar className={classes.appbar}>
<a href="www.google.com">
<span>Title</span>
</a>
</Toolbar>
Yes, there are ways to do this particular example correctly using MUI control properties, remember this is an example. Real world code is very complex and lots of code.
I would like to access that hyperlink by way of specificity using the main parent class as a hook class. The desired rendered css would look like this:
.appbar {
background: #6d6146;
}
.appbar:hover {
background: #9e8e6a;
}
.appbar a{
color: #d63302;
}
My attempt to create specificity is not working. This is what I tried:
const styles = {
appbar: {
background: '#6d6146',
'&:hover': {
background: '#9e8e6a',
},
'a': {
color: '#d63302',
},
},
};
According to how MUI-Next handles pseudo-classes to create specificity, this element specificity should work, but doesn't. Can this be done and I am not using the right syntax, or is this not supported?
Remember this is Material UI Next found here. Completely different than the older Material UI.
Here is a playground for ya. Thanks in advance.
SAMPLE CODE
Try this :
appbar: {
background: "#6d6146",
"&:hover": {
background: "#9e8e6a"
},
"& a": {
color: "black",
"&:hover": {
color: "red"
}
}
}
Working link