英文:
How to change fontColor when TimePicker is disabled- MUI React
问题
我试图在 TimePicker 中将文本颜色设置为另一种颜色，但没有成功。有谁知道如何使用 sx 或 slotProps 来更改它吗？这是我的当前代码。
<TimePicker
disabled={true} // 在此处禁用
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 }}
/>
英文:
I'm trying to set another color to the text in TimePicker when it is disabled, but with no success. Does anyone knows how to do change it using sx or slotProps? Here is my current code.
<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}}
/>
答案1
得分: 2
The placeholder is styled using the -webkit-text-fill-color property. Also, it has an opacity of .42 by default so any color will be semi-transparent, unless you set the opacity back to 1:
<TimePicker
sx={{
input: {
'&.Mui-disabled': {
WebkitTextFillColor: '#FFF',
opacity: 1
}
}
}}
/>
Demo.
英文:
The placeholder is styled using the -webkit-text-fill-color property. Also, it has an opacity of .42 by default so any color will be semi-transparent, unless you set the opacity back to 1:
<TimePicker
sx={{
input: {
'&.Mui-disabled': {
WebkitTextFillColor: '#FFF',
opacity: 1
}
}
}}
/>
Demo.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论