У меня возникла проблема при использовании MUI DatePicker. Я не могу настроить цвет шрифта и размер шрифта даты. Мой код:
const DateSettings = () => {
const [value, setValue] = React.useState<Date | null>();
const handleChangeEvent = (newValue: Date | null) => {
setValue(newValue);
};
return (
<Box>
<LocalizationProvider dateAdapter = {DateAdapter}>
<Stack spacing = {3}>
<MobileDatePicker
label = "Date mobile"
inputFormat = "MM/dd/yyyy"
value = {value}
onChange = {handleChangeEvent}
components = {{ OpenPickerIcon: CalendarIcon }}
renderInput = {(params) => (
<TextField {...params} />
)}
/>
</Stack>
</LocalizationProvider>
</Box>
);
};
export default DateSettings;
Я попытался добавить стиль в текстовое поле, используя sx prop, как обычно. Он меняет цвет фона, но не меняет цвет и размер шрифта, если я использую этот блок кода:
renderInput = {(params) => (
<TextField sx = {{backgroundColor:'red',color:'white'}} {...params} />
)}
Я также пробовал пользовательский стиль, подобный этому, но все тот же!
const useStyles = makeStyles({
root: {
background: "red",
border: 0,
borderRadius: 3,
color: "white",
},
});
const DateSettings = () => {
const classes = useStyles();
return (
<Box>
<LocalizationProvider dateAdapter = {DateAdapter}>
<Stack spacing = {3}>
<MobileDatePicker
className = {classes.root}
inputFormat = "MM/dd/yyyy"
value = {value}
onChange = {handleChangeEvent}
components = {{ OpenPickerIcon: CalendarIcon }}
renderInput = {(params) => (
<TextField {...params} />
)}
/>
</Stack>
</LocalizationProvider>
</Box>
);
};
export default DateSettings;
Есть ли другой способ изменить это?
Все, что вам нужно было сделать, это просмотреть текст, скопировать соответствующее имя класса и применить class.root непосредственно к .
const useStyles = makeStyles({
root: {
"& .MuiOutlinedInput-input": {
border: 0,
borderRadius: 3,
color: "red",
fontSize: 24
}
}
});
const DateSettings() {
const classes = useStyles();
const [value, setValue] = useState(Date | (null > null));
return (
<Box>
<LocalizationProvider dateAdapter = {AdapterDateFns}>
<Stack spacing = {3}>
<MobileDatePicker
inputFormat = "MM/dd/yyyy"
value = {value}
onChange = {handleChangeEvent}
components = {{ OpenPickerIcon: CalendarIcon }}
renderInput = {(params) => <TextField className = {classes.root} {...params} />}
/>
</Stack>
</LocalizationProvider>
</Box>
);
}