React admin custom input component with text input base style

Viewed 484

I created a DateTimePicker component for my react-admin project:

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>
  );
}

It works great, however the design does not follow the other classic inputs:

enter image description here

What is the simplest way to keep the same design across custom material-ui components?

1 Answers

There are 3 variants to choose from that are applied to MUI input elements: outlined, filled and standard. You need to provide DateTimePicker with inputVariant prop set to filled to get a "greyish" look. Plus you need to pass a className prop so that react-admin can pass parent controled classses (this should fix width issues).

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

You can see the look of outlined, filled and standard clicking link below:

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

Related