javascript - 给 Material ui卡添加缩略图

Question

我在我的 React We 应用程序中使用 Material-UI 卡片。目前这张卡很平面，有title。我想在卡片的最左侧有一个缩略图，旁边是卡片，例如某些应用程序中的歌曲列表。我尝试这样做但我无法实现。有什么方法可以将图像作为缩略图添加到卡片(最左侧)。我想将缩略图高度与卡片高度相匹配，并且缩略图应该从左边缘开始(无边距)。有人可以帮助我吗？

这是我当前卡的代码:

render(){  
    return (
        <div>
            <MuiThemeProvider>
                <Card style= {{marginBottom: 2}} 
                      onTouchTap={() => {this.props.handleClick(this.props.id)}}
                      zDepth={this.state.shadow}>
                    <CardHeader
                      style={{fontFamily: 'Roboto, sans-serif', fontWeight:600}}
                        title={this.props.title}
                        //subtitle={value.description}
                        actAsExpander={false}
                        showExpandableButton={false}
                    />
                </Card>
            </MuiThemeProvider>
        </div>
    );
}

Answer 1

您可能最好创建自己的组件，或者在您的左头像中使用带有方形图像的 List/ListItem:

jsFiddle:https://jsfiddle.net/42f81uvv/1/

<List style={{ width: 400 }}>
  <ListItem
    innerDivStyle={{ paddingLeft: 80 }}
    leftAvatar={
      <img style={{ height: '100%', margin: -16 }} src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png" />
    }
    primaryText="Some Title"
    secondaryText="That's a good looking thumbnail"
    />
</List>