反应管理员自定义输入组件与文本输入基本样式

Question

我为我的 react-admin 项目创建了一个 DateTimePicker 组件：

import { DateTimePicker, DateTimePickerProps, MuiPickersUtilsProvider } from "@material-ui/pickers";
import { FC } from "react";
import { FieldTitle, InputProps, useInput } from "react-admin";

import MomentUtils from "@date-io/moment";
import moment from "moment";
import "moment/locale/fr";

interface DateTimeInputProps extends InputProps<DateTimePickerProps> {
  label: string;
}

export const DateTimeInput: FC<DateTimeInputProps> = ({ source, label, resource, options }) => {
  const {
    input: { value, onChange },
    isRequired,
  } = useInput({ source });

  return (
    <MuiPickersUtilsProvider
      libInstance={moment}
      utils={MomentUtils}
      locale='fr'
    >
      <DateTimePicker
        label={<FieldTitle
          label={label}
          source={source}
          resource={resource}
          isRequired={isRequired}
        />}
        value={value || null}
        onChange={onChange}
        format="llll"
        ampm={false}
        {...options}
      />
    </MuiPickersUtilsProvider>
  );
}

效果很好，但设计没有遵循其他经典输入：

在自定义 material-ui 组件中保持相同设计的最简单方法是什么？

Answer 1

有 3 种应用于 MUI 输入元素的变体可供选择：outlined、filled 和 standard。您需要提供 DateTimePicker 并将 inputVariant 属性设置为 filled 以获得“灰色”外观。另外，您需要传递一个 className 道具，以便 react-admin 可以传递父级控制的类（这应该可以解决宽度问题）。

<DateTimePicker {...props} inputVariant="filled" className={props.className} />

您可以在下面点击 link 查看 outlined、filled 和 standard 的外观：

https://mui.com/components/text-fields/#basic-textfield

反应管理员自定义输入组件与文本输入基本样式

React admin custom input component with text input base style

reactjs

material-ui

react-admin