react-admin ImageField height/width

Question

试图设置图像字段的高度和宽度，它会在周围的容器上强制执行，但不会在图像本身上强制执行。

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} />

Answer 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" />

Answer 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

Answer 3

推荐的方法是使用

<ImageField
source="imageUrl" label="Profile Picture"
sx={{ '& img': { maxWidth: 50, maxHeight: 50, objectFit: 'contain' } }}
/>