我如何覆盖材质UI V5日期选择器样式?

Question

我试图通过创建主题来覆盖Mui X-Date-Pickers V5。

此组件构建在许多其他组件之上。我想改变borderColor属性，但这个是在fieldset元素上设置的，所以我需要从MuiInputBase向下钻取。

MuiInputBase: {
styleOverrides: {
root: {
'& > fieldset': {
borderColor: '#000000',
},
'& > fieldset.MuiOutlinedInput-root:hover': {
borderColor: 'red',
},
},
},
},

所以我能够到达字段集并改变borderColor属性。但我不知道如何悬停在MuiInputBase和更新borderColor上的fieldset。

我已经尝试嵌套我的悬停在& > fieldset，但仍然不工作

Answer 1

这是正确的更改方式，如下所述

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
const theme = createTheme(
{
palette: {
primary: { main: '#ff0000' },
},
},
);
ReactDOM.createRoot(document.querySelector("#root")).render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Helper text example"
slotProps={{
textField: {
helperText: "MM/DD/YYYY"
}
}}
/>
</LocalizationProvider>
</ThemeProvider>
</React.StrictMode>
);

演示https://codesandbox.io/s/fs5mf2?file=/demo.tsx: 1252 - 1281