You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何调整MUI X Date Picker年份选择器的字体大小?

MUI X Date Picker年份选择器字体大小自定义问题

我在设置MUI X Date Picker样式时遇到问题,尤其是年份选择器(Year Picker)。我尝试了两种样式设置方法:

尝试过的两种样式设置方法

方法1:借助MUI的createTheme()

MuiYearPicker: {
  styleOverrides: {
    root: {
      fontFamily: "Cabin",
      color: `${colors.primary}`,
      fontSize: "1rem",
    },
  },
},
PrivatePickersYear: {
  styleOverrides: {
    root: {
      fontFamily: "Cabin",
      color: `${colors.primary}`,
      fontSize: "1rem",
    },
  },
},

方法2:通过为DatePicker的Popper属性提供sx props来设置样式

const popperSx: SxProps = {
  "& .MuiPaper-root": {
    color: colors.primary,
    fontSize: "1.2rem",
    fontFamily: "Cabin",
  },
  "& .MuiCalendarPicker-root": {
    color: colors.primary,
    fontSize: "1.2rem",
    fontFamily: "Cabin",
  },
  "& .MuiPickersDay-dayWithMargin": {
    color: colors.primary,
    fontSize: "1.2rem",
    fontFamily: "Cabin",
  },
  "& .MuiYearPicker-root": {
    color: colors.primary,
    fontSize: "1.2rem",
    fontFamily: "Cabin",
  },
};

然而,尽管DatePicker的其他部分(日期、日期选择器)样式已生效,但年份选择器显示的年份字体仍然非常小:

年份选择器字体过小效果

请问该如何自定义它的字体大小?


内容的提问来源于stack exchange,提问作者Shade Cornedrue

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 14:32:21