素材uiカードにサムネイルを追加

Question

私は私の反応のアプリケーションでMaterial-UIカードを使用しています。現在、カードは非常に飛行機で、タイトルを持っています。私は、カードの左端にサムネイルを、カードのタイルの隣にサムネイルを配置したいとします。たとえば、いくつかのアプリの曲リストのようにします。私はやってみたが、達成できなかった。カードにサムネイルとして画像を追加する方法はありますか（左端）。サムネイルの高さをカードの高さに一致させ、サムネイルをフォームの左端から開始する必要があります（余白なし）。誰か助けてくれますか？ここで

は、現在のカードのために私のコードです：

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

あなたはおそらく、独自のコンポーネントを作成、または多分あなたのleftAvatarで正方形の画像で一覧/の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>