我尝试在 TimePicker 禁用时为文本设置另一种颜色,但没有成功。有谁知道如何使用 sx 或 slotProps 更改它?这是我当前的代码。
<TimePicker
disabled={true} // disabled here
ampm={false}
views={['hours', 'minutes', 'seconds']}
sx={{
backgroundColor: "#333335",
font: "white",
color: "#FFFF",
textDecoration: "bold",
input: {
color: "#FFFF",
fontSize: "1.4rem",
}
}}
slotProps={{
popper: {
sx: {
"& .MuiList-root": {
backgroundColor: "#333335",
},
"& .MuiMenuItem-root": {
"&.Mui-selected": {
backgroundColor: "#04395E",
color: "white"
},
color: "white"
},
},
},
}}
value={selectedTime}
onChange={(newTime: any) => setSelectedTime(newTime)}
timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>
占位符使用
-webkit-text-fill-color
属性设置样式:
<TimePicker
sx={{
input: {
'&.Mui-disabled': {
WebkitTextFillColor: '#fff'
}
}
}}
/>
演示。