MUI DatePicker输入框（textArea）样式设置失败求助

兄弟我太懂你这种明明下拉框样式能生效，输入框却纹丝不动的憋屈了！我看了你贴的代码，问题大概率出在slotProps.textField的写法上——你用了一个返回对象的函数，但其实这里直接传包含sx的对象就行，不用套函数~

给你调整一下代码，你试试这个版本：

<DatePicker
  label="Select a date"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  slotProps={{
    // 这里直接传对象，不用包函数
    textField: {
      sx: {
        '& .MuiInputBase-root': {
          height: 50,
          fontSize: '16px',
          border: '2px solid #d24a19',
          borderRadius: '8px',
          backgroundColor: '#f9f9f9',
        },
        '& input': {
          padding: '12px',
          fontSize: '16px',
          color: 'black',
        },
      },
    },
    popper: {
      sx: {
        '.MuiPaper-root': {
          border: '2px solid #d2c019',
          borderRadius: '10px',
        },
      },
    },
  }}
/>

另外再给你两个小排查点：

• 检查一下有没有其他全局样式或者组件层级的样式把这个输入框的样式覆盖了，有时候父组件的className或者全局CSS会偷偷搞事情
• 确认一下你用的MUI版本，如果是比较新的v5版本，这个写法是没问题的；如果是旧版本，可能需要调整类名（不过看你用的slotProps，应该是v5没错）

你先试试改完的代码，应该能搞定输入框的样式了！

内容来源于stack exchange