我有DesktopDatePicker个来自Material-UI(版本5.0.0),我喜欢在日历的左侧显示"清晰"的文本.

import * as React from "react";
import dayjs from "dayjs";
import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";

export default function ResponsiveDatePickers() {
  const [value, setValue] = React.useState(dayjs("2022-04-07"));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DesktopDatePicker
        label="For desktop"
        value={value}
        minDate={dayjs("2017-01-01")}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        componentsProps={{
          actionBar: { actions: ["clear"], position: "left" }
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

I added position:"left" in actionBar but this didn't work. enter image description here

推荐答案

由于它是由弹性框对齐的,因此您需要在动作栏样式属性中添加justifyContent: "flex-start".

例如:

componentsProps={{
   actionBar: { actions: ["clear"], style: {justifyContent: "flex-start"} }
}}

为了进一步回答 comments 中的问题,因为MUI组件都允许你访问样式,所以我try 了一下,它起作用了--这是MUIV4访问样式的方法,似乎它仍然有效.MUiv5的方法很可能是通过组件现在拥有的sx属性访问样式.

componentsProps={{
   actionBar: { actions: ["clear"], sx: {justifyContent: "flex-start"} }
}}

所有的MUI组件都可以使用sx property进行样式设置.

Reactjs相关问答推荐

useReducer和带有回调的useState之间是否有实际区别?

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

有没有方法覆盖NextJS 14中的布局?

props 可以在Reaction中锻造吗?

在Next.js中实现动态更改的服务器组件

以下代码是否存在安全问题?

在Reaction中单击并显示子组件延迟/动画

在url中使用MongoDB对象ID被认为是不好的做法?

Reaction Google Maps API无法获取标题

react -无法获取函数的最新参数值

自定义变量默认、聚焦和填充时所需TextField中标签的星号 colored颜色

console.logs 没有显示在浏览器控制台上,但显示在我的终端上

如何在PrimeReact的表格中修改筛选图标功能

我正在try 将一组加载程序函数发送到我的路由,它抛出一个错误 Handler is not a funtion in a reactJs application

作为单个变量的 React 组件是否比 memoized 组件渲染得更快?

如何在 MUI 数据网格中的 renderCell 组件之间传递状态

react-query、react-hook-form 和表单验证

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上

在 redux 状态更改时更新react 按钮禁用状态

Material UI 安装和 React v. 18.2 出现问题