反应管理员 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

反应管理员 ImageField height/width

react-admin ImageField height/width

react-admin