如何在React TypeScript中用SCSS类样式化MUI DatePicker（替代InputProps）

步骤1：调整组件代码 #

移除InputProps中的sx配置，让绑定在TextField上的自定义类承担样式控制：

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    value={start_date}
    className={styles.datepicker}
    inputFormat="dd/MM/yyyy"
    onChange={handleStartDateChange}
    renderInput={(params) => (
      <TextField
        {...params}
        size="small"
        fullWidth
        variant="standard"
        className={styles.calendar}
      />
    )}
  />
</LocalizationProvider>

步骤2：编写SCSS样式 #

利用SCSS嵌套语法，通过自定义类calendar定位内部的输入框和日历图标，完全替代原来的sx逻辑：

// 可选：给DatePicker外层容器添加基础样式
.datepicker {
  margin-bottom: 16px;
}

// 核心样式：控制输入框与日历图标
.calendar {
  // 样式化输入框
  input {
    font-size: 12px;
    color: white;
  }

  // 样式化日历图标（基于MUI内置类）
  .MuiSvgIcon-root {
    color: white;
    font-size: 22px;
  }
}

优先级优化（可选） #

如果MUI默认样式优先级更高导致自定义样式不生效，可通过多层嵌套提升选择器权重：

.datepicker .calendar {
  input {
    font-size: 12px;
    color: white;
  }

  .MuiSvgIcon-root {
    color: white;
    font-size: 22px;
  }
}

补充说明 #

• DatePicker的输入区域由TextField渲染，直接在TextField上绑定自定义类并编写样式，比在DatePicker上绑定更精准
• SCSS的嵌套语法和原sx的结构逻辑一致，迁移后代码更整洁，便于后续维护和样式复用

内容的提问来源于stack exchange，提问作者Geisa Nebiu