react-admin ImageField 高度/宽度答案

【问题标题】：react-admin ImageField height/widthreact-admin ImageField 高度/宽度
【发布时间】：2018-07-20 17:12:58
【问题描述】：

尝试设置图像字段的高度和宽度，并将其强制在周围的容器上，而不是在图像本身上。

const styles = {
  profile: { height: 50, width: 50 }
}

export const UserList = withStyles(styles)(({ classes, permissions, ...props }) => (
  <List actions={<UserListActions />} sort={{ field: 'lastName', order: 'ASC' }} title="All users" {...props} bulkActions={false}>
    <Datagrid>
      <ImageField source="imageUrl" label="Profile Picture" className={classes.profile} />

【问题讨论】：

标签： react-admin

【解决方案1】：

想通了。只是做错了：

const styles = {
  image: { maxHeight: '3rem' }
}

export const UserList = withStyles(styles)(({ classes, permissions, ...props }) => (
  <List actions={<UserListActions />} sort={{ field: 'lastName', order: 'ASC' }} title="All users" {...props} bulkActions={false}>
    <Datagrid>
      <ImageField classes={classes} source="imageUrl" label="Profile Picture" />

【讨论】：

【解决方案2】：

这也有效：

import { makeStyles } from '@material-ui/core/styles';

const useImageFieldStyles = makeStyles(theme => ({
    image: { // This will override the style of the <img> inside the <div>
        width: 50,
        height: 50,
    }
}));

const PostEdit = ({ permissions, ...props }) => {
    const imageFieldClasses = useImageFieldStyles();
    return (
        // ...
        <ImageInput multiple source="pictures" accept="image/*">
            <ImageField classes={imageFieldClasses} source="src" title="title" />
        </ImageInput>
        // ...
    );
};

来自： https://github.com/marmelab/react-admin/issues/3106#issuecomment-658752706

【讨论】：