我正在try 使用css类名称属性更改TimePicker中的时钟 colored颜色 和确定按钮字体 colored颜色 等属性,但没有成功.有人知道如何使用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}}
/>

Here's a image showing the elements that I want to change the color TimePicker

推荐答案

您可以将以下内容添加到TimePickersx属性中,以更改时钟图标的 colored颜色 .

"& .MuiSvgIcon-root": {
  color: "white"
},

对于OK文本按钮,您可以在poppersx属性上使用以下内容

"& .MuiDialogActions-root .MuiButton-text": {
  color: "white"
}

Reactjs相关问答推荐

Shadck/ui Select -当用户 Select 项目时更改状态

Firebase删除UserWithEmail AndPassword仅创建匿名用户

react 表复选框不对任何操作做出react

Reaction Axios多部分/表单-数据数组不工作

有没有办法在Shopify中显示自定义计算的交货日期?

错误./src/TopScroll.js 31:21-31导出';(作为';随路由导入)在';Reaction-Router-Dom';中找不到

在新屏幕上显示照片时出现问题-react

在Reaction中的第一次装载时,Use Effect返回空数组

无法使用导入app/page.jsx的组件中的tailwind 类文本操作和自定义动画

StrictMode+SetInterval=双重渲染(即使使用useEffect清理)

获取类别和页面的参数

提前输入错误:选项类型上不存在属性名称

React 组件列表中的第一个计时器正在获取值 NaN

React Native 背景动画反转

MUI TextField Select 菜单的最大高度

单元测试 useLoaderData() react-router v6 加载器函数

React Native PermissionsAndroid 不包括 READ_MEDIA_IMAGES.如何解决这个问题?

如何解决在 react.js 中找不到模块错误

在 React 中使用使用状态挂钩合并两个数组

我想将悬停 colored颜色 更改为红色.写了一个话题,这个元素没有react ,怎么解决呢?