英文:
How to change Clock Color and Ok button fontColor in TimePicker - MUI React
问题
我试图使用css className属性更改TimePicker中的Clock Color和Ok按钮fontColor等属性，但没有成功。有人知道如何使用sx或slotProps进行更改吗？
以下是您要更改的部分：
<TimePicker
ampm={false}
views={['hours', 'minutes', 'seconds']}
sx={{
backgroundColor: "#333335",
font: "white",
color: "#FFFF",
textDecoration: "bold",
input: {
color: "#FFFF",
fontSize: "1.4rem",
},
"& .MuiTimePicker-root": {
backgroundColor: "#222223",
},
"& .MuiTimePicker-input": {
color: "#FFFF",
fontSize: "1.2rem",
},
}}
slotProps={{
popper: {
sx: {
"& .MuiList-root": {
backgroundColor: "#333335",
},
"& .MuiMenuItem-root": {
"&.Mui-selected": {
backgroundColor: "#04395E",
color: "white"
},
color: "white"
},
"& .MuiDialogActions-root": {
backgroundColor: "#333335",
},
"& .MuiSvgIcon-root": {
"&.MuiSvgIcon-fontSizeMedium": {
backgroundColor: "#04395E",
color: "white"
},
color: "white"
},
},
},
}}
value={selectedTime}
onChange={(newTime: any) => setSelectedTime(newTime)}
timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>
这是您要更改颜色的元素的图片：
英文:
I'm trying to change some properties like Clock Color and Ok button fontColor in TimePicker using the css className properties, but with no success. Does anyone knows how to do change it using sx or slotProps?
<TimePicker
ampm={false}
views={['hours', 'minutes', 'seconds']}
sx={{
backgroundColor: "#333335",
font: "white",
color: "#FFFF",
textDecoration: "bold",
input: {
color: "#FFFF",
fontSize: "1.4rem",
},
"& .MuiTimePicker-root": {
backgroundColor: "#222223",
},
"& .MuiTimePicker-input": {
color: "#FFFF",
fontSize: "1.2rem",
},
}}
slotProps={{
popper: {
sx: {
"& .MuiList-root": {
backgroundColor: "#333335",
},
"& .MuiMenuItem-root": {
"&.Mui-selected": {
backgroundColor: "#04395E",
color: "white"
},
color: "white"
},
"& .MuiDialogActions-root": {
backgroundColor: "#333335",
},
"& .MuiSvgIcon-root": {
"&.MuiSvgIcon-fontSizeMedium": {
backgroundColor: "#04395E",
color: "white"
},
color: "white"
},
},
},
}}
value={selectedTime}
onChange={(newTime: any) => setSelectedTime(newTime)}
timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>
Here's a image showing the elements that I want to change the color
答案1
得分: 2
你可以将以下内容添加到 TimePicker 的 sx 属性中以更改时钟图标的颜色。
"& .MuiSvgIcon-root": {
color: "white"
},
对于 OK 文本按钮，您可以在 popper 的 sx 属性上使用以下内容。
"& .MuiDialogActions-root .MuiButton-text": {
color: "white"
}
英文:
You can add the following to the sx property on the TimePicker to change the color of the clock icon.
"& .MuiSvgIcon-root": {
color: "white"
},
and for the OK text button you can use the following on the sx property of the popper
"& .MuiDialogActions-root .MuiButton-text": {
color: "white"
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论