react-admin の ImageField でサイズを指定する

TL;DR

• react-admin の ImageField でサイズを指定する

カスタムコンポーネント

import { ImageField } from "react-admin";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = (width: number) => makeStyles({ image: { width } })();

export const MyImageField = ({ width = 480, ...props }) => {
  const classes = useStyles(width);
  return <ImageField {...props} classes={classes} />;
};

MyImageField.defaultProps = {
  addLabel: true,
  textAlign: "center",
};

MyImageField.propTypes = {
  width: PropTypes.number,
};

使い方

import { MyImageField } from "../MyImageField";

const list = (props) => (
  <List>
    <Datagrid>
      <MyImageField source="photo.src" width={80} />
    </Datagrid>
  </List>
);

参考

• https://github.com/marmelab/react-admin/issues/3106#issuecomment-658752706