首页 > 解决方案 > 材质 UI 日期选择器使用默认主题而不是自定义主题

问题描述

我正在为我的反应项目使用 Material UI。我无法为日期选择器应用默认主题。它适用于文本字段和其他组件。也找不到太多关于此的文档。我也希望将“MuiOutlinedInput”应用于我的日期选择器。

在此处输入图像描述

有人知道怎么修这个东西吗?这是我为整个项目定制的主题

const theme = createTheme({
  typography: {
    htmlFontSize: 10, //16
    fontSize: 14, //15
  },
  palette: {
    primary: {
      main: "#1D4659",
      // light: "rgba(0, 179, 190, 0.35)",
    },
    secondary: {
      main: "#1D4659",
    },
    error: {
      main: "#FF7236",
    },
    text: {
      primary: "#1D4659", //Brand / Midnight
      secondary: "#1D4659", //Brand / Space
    },
    info: {
      main: "#1D4659",
    },
    background: {
      default: "#ffffff", // ultra light grey
    },
    divider: "#F2F2F2",
  },
  overrides: {
    // Style sheet name ⚛️
    MuiInputBase: {
      input: {
        fontSize: "14px",
        lineHeight: "1.4rem",
      },
    },
    MuiFormControl: {
      marginNormal: {
        marginTop: 0,
        marginBottom: 0,
      },
      marginDense: {
        marginTop: 0,
        marginBottom: 0,
      },
    },
    
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "#CACACA",
          borderWidth: "1px",
        },
        "&:hover $notchedOutline": {
          borderColor: "#CACACA",
          borderWidth: "1px",
        },
        "&$focused $notchedOutline": {
          borderColor: "#1D4659",
          borderWidth: "1px",
        },
      },
      multiline: {
        padding: "1.1rem 1rem",
      },
      inputMultiline: {
        lineHeight: "20px",
      },
      input: {
        padding: "1rem",
        backgroundColor: "#fff",
        borderRadius: "4px",
      },
    },
  },
  
});

标签: material-uireact-materialmaterialdatepicker

解决方案


推荐阅读