TextField 中的额外框 type=Date |材质 UI

Question

我已经研究了很多东西，以确保我没有看到盒子中的盒子（参见屏幕截图）。但是，无论我做什么，都无法摆脱这个盒子。 我正在使用 Material UI 版本： "@mui/material": "^5.16.1"

我的日期字段在哪里看起来像：

import {
  TextField,
} from "@mui/material";

<TextField
    label="From Date"
    type="date"
    value={formattedFromDate}
    onChange={(e) => updateBlock(index, "fromDate", e.target.value)}
    InputLabelProps={{ shrink: true }}
    margin="normal"
    variant="outlined"
/>

有什么想法吗？

编辑： 没有 CSS 类。

我不想使用 Material UI 中的日期选择器，因为这涉及我更新到下一版本的 Material UI，并且会破坏我的其他依赖项。

Answer 1

经过多次尝试和错误，我终于解决了这个问题。日期选择器中的内部框是 Material-UI 的 TextField（类型为“date”）的默认行为。所以我使用以下方法覆盖了底层的 MUI 样式：

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  dateInput: {
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        border: "none", // Remove the border of the inner box
      },
    },
  },
});

const classes = useStyles();

<TextField
    className={classes.dateInput}
    label="From Date"
    type="date"
    value={formattedFromDate}
    onChange={(e) => updateBlock(index, "fromDate", e.target.value)}
    InputLabelProps={{ shrink: true }}
    margin="normal"
    variant="outlined"
/>