材质ui:如何改变DatePicker文本和日历图标的颜色？
材质ui:如何改变DatePicker文本和日历图标的颜色？
提问于 2021-11-04 08:56:36
我试图改变材料UI，DatePicker，日期，文本和日历图标颜色。
我试图将其传递样式更改为InputProps，但它只用于移除边框。
相反，没有什么改变，我试图将样式应用于theme.tsx，但这也没有帮助。任何帮助都将不胜感激。
import * as React from "react";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DesktopDatePicker from "@mui/lab/DesktopDatePicker";
import { makeStyles, createStyles } from "@material-ui/core";
const useStyles = makeStyles(() =>
createStyles({
noBorder: {
outline: "none",
border: "none",
color: "#fff",
},
})
);
export default function DatePicker() {
const [value, setValue] = React.useState<Date | null>();
const classes = useStyles();
const handleChange = (newvalue: Date | null) => {
setValue(newvalue);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={2}>
<DesktopDatePicker
inputFormat="dd/MM/yyy"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
InputProps={{
classes: { notchedOutline: classes.noBorder },
}}
/>
</Stack>
</LocalizationProvider>
);
}回答 3
Stack Overflow用户
回答已采纳
发布于 2021-11-04 10:14:31
sx 1解决方案-使用属性
可以将sx属性设置为<TextField/>组件，以便覆盖默认样式属性：
const color = "#c44242";
...
return (
<DatePicker
renderInput={(params) => {
return (
<TextField
{...params}
sx={{
svg: { color },
input: { color },
label: { color }
}}
/>
);
}}
...other props
/>
)第二个解决方案-提供自定义主题
还可以创建自定义主题并在其中覆盖颜色：
const theme = createTheme({
components: {
MuiIconButton: {
styleOverrides: {
sizeMedium: {
color
}
}
},
MuiOutlinedInput: {
styleOverrides: {
root: {
color
}
}
},
MuiInputLabel: {
styleOverrides: {
root: {
color
}
}
}
}
});然后用ThemeProvdier包装组件。
Stack Overflow用户
发布于 2022-04-19 19:20:39
对我有用的解决方案如下--我在<TextField/>中使用了<TextField/>属性，德米特里夫也提到了这个属性。实现方式是这样的-
<DateTimePicker
value={value}
onChange={handleChange}
renderInput={(params) => (
<TextField
{...params}
sx={{
svg: { color: '#fff' },
input: { color: '#fff' },
}}
/>
)}
/>Stack Overflow用户
发布于 2021-11-04 09:09:34
尝试检查元素，然后您可以看到被检查元素的样式。检查元件是非常有用的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69836609
复制相关文章
相似问题
腾讯云开发者
