我正在try 使用css类名称属性更改TimePicker中的一些属性,如背景 colored颜色 和字体 colored颜色 ,但没有成功.有谁知道如何做到这一点,我在哪里可以找到关于这些属性的文档?

<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",
            },
          }}
          value={selectedTime}
          onChange={(newTime: any) => setSelectedTime(newTime)}
          timeSteps={{hours: 1, minutes: 1, seconds: 1}}
        />

TimePicker

推荐答案

您可以在TimePicker中使用slotProps.

例如:

<TimePicker
  /* { ...restProps } */
  slotProps={{
    popper: {
      sx: {
        "& .MuiList-root": {
          backgroundColor: "yellow",
        },
        "& .MuiMenuItem-root": {
          "&.Mui-selected": {
             backgroundColor: "green",
             color: "blue"
          },
          color: "red"
        },
        "& .MuiDialogActions-root": {
          backgroundColor: "black",
        },
      },
    },
  }}
/>;

您可以在这里看到整个示例:codesandbox.io

Reactjs相关问答推荐

react 导致不必要的回归

在react中向数组状态添加值时出错

在Reaction+Redux+RTKQuery中对API调用进行排序

使用下一步中的路由/导航不会立即加载路由

Reaction-Query&-使用Mutation触发成功,而应该触发错误

TanStack/Reaction-Query在我的Vercel应用程序中不起作用

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

onClick 事件处理程序未应用于样式组件

如果我使用 formik,如何在嵌套对象中写入正确的值?

验证 Yup 中的对象项

如何使用服务器中的数据自动填充表单字段?

如何在 React 中停止嵌套 Link 和 Button 组件的事件传播?

如何在 JS 中绘制具有不同笔画宽度的样条线

React + Redux:数据未正确传递给具有动态路由的组件

在 React JS 中编辑表格数据

antd 找不到 comments

添加 React/Redux 组件模板的 VS Code 扩展

如何使用 React Router 在 React 中正确同步 useEffect 和 useLocation 挂钩?

单击当前子div时如何更改p标签的图像和样式?react

React中`onScroll`和`onScrollCapture`之间的区别?