当我使用样式更改图像宽度和高度时,仅列宽会更改。图像尺寸不受影响。
有什么想法吗?
没有样式
具有样式
复制 CodeSandbox(https://codesandbox.io/embed/54r440jp8k)
import React from "react";
import { Datagrid, ImageField, List, TextField } from "react-admin"; // eslint-disable-line import/no-unresolved
import { withStyles } from "material-ui/styles";
const styles = {
image: {
width: "20px",
height: "20px"
}
};
export const PostList = withStyles(styles)(({ classes, ...props }) => (
<List {...props}>
<Datagrid>
<ImageField source="image.url" className={classes.image} />
<TextField source="id" />
<TextField source="title" />
</Datagrid>
</List>
));
使用
答案 0 :(得分:1)
您可能需要一个自定义组件才能执行此类操作。那这样的事情呢:
ListAvatar.js
import React from 'react';
import Avatar from '@material-ui/core/Avatar';
const ListAvatar = ({ record, size }) => (
<Avatar
src={`${record.url.image}?size=${size}x${size}`}
size={size}
style={{
width: size,
height: size
}}
/>
);
ListAvatar.defaultProps = {
size: 30,
};
export default ListAvatar;
PostList.js
import React from "react";
import { Datagrid, List, TextField } from "react-admin"; // eslint-disable-line import/no-unresolved
import ListAvatar from './ListAvatar.js'
import { withStyles } from "material-ui/styles";
export const PostList = ({ classes, ...props }) => (
<List {...props}>
<Datagrid>
<ListAvatar />
<TextField source="id" />
<TextField source="title" />
</Datagrid>
</List>
);
答案 1 :(得分:0)
建立Shawn K的职位(感谢指导!)...
我认为这是一个完整的组件(我已经测试了<List />
组件中的类重写,并且可以正常工作。它也遵循react-admin
和material-ui
文档(和标准)。但是,我对此还很陌生,因此请做出任何更正进行答复,我将对此进行更新。
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import classNames from "classnames";
import Avatar from "@material-ui/core/Avatar";
const styles = {
img: {
width: 36,
height: 36
},
root: {}
};
const ListAvatar = ({ className, record, source, classes }) => {
return (
<Avatar
src={record[source]}
className={classNames(classes.root, classes.img, className)}
/>
);
};
ListAvatar.propTypes = {
label: PropTypes.string,
record: PropTypes.object,
source: PropTypes.string.isRequired,
classes: PropTypes.object.isRequired,
className: PropTypes.string
};
export default withStyles(styles)(ListAvatar);