[英]Change background color of Material Ui datepicker
我想更改我的材料 ui datepicker modal 的背景颜色
从“@material-ui/core”导入{ createMuiTheme };
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
},
},
},
});
export default materialTheme
在上面的代码中,我能够更改日期的 colors 和其他一些代码,但不能更改总背景颜色
是否有任何文档可以从中获取这些 class 名称或任何其他选项
在 CSS 中尝试:
.MuiPaper-root {
background-color: #eaea87;
}
MuiPickers 使用对话框材质 Ui,因此覆盖此选择器中使用的所有对话框组件。 我不确定下面的这个解决方案。 你可以试试这个,希望它有效。
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
backgroundColor: 'YOUR HEX HERE',
},
},
},
});
我认为最好的方法是在 DialogProps 中发送样式
https://material-ui-pickers.dev/api/DateTimePicker (部分模态包装器)
那么你可以覆盖所有对话框模式。
在最新版本的 MUI (v5.3.1) 中,我通过在
renderInput<\/code>的
TextField<\/code>中添加
sx={{ backgroundColor: 'white' }}<\/code>解决了这个问题,如下所示:
<MobileDatePicker
label="Date"
value={date}
onChange={(newValue) => {
setDate(newValue);
}}
renderInput={(params) => (
<TextField
sx={{ backgroundColor: 'white' }}
fullWidth
{...params}
/>
)}
/>
您可以使用createTheme
提供组件覆盖( 请参阅文档):
const theme = createTheme({
components: {
// Name of the component
MuiInputBase: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
backgroundColor: "white",
},
},
},
},
});
您可以通过检查元素查看要使用的组件的名称并查看 class 名称,您可以在组件定义中找到插槽, 例如这是MuiInput
组件的插槽。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.