response-admin ImageField высота / ширина

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