使用自定義頭像組件時，材料UI v0 ListItem對齊問題

Question

材質用戶界面版本：v0.20.0

我正在嘗試通過CustomAvatar組件分配leftAvatar值，但是它沒有對齊，如您在所附的屏幕截圖中所見。 請幫忙。

CustomAvatar ：此組件在某些條件下起作用，例如，如果圖像可用，則其

MemberList / index.js

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {List, ListItem} from 'material-ui/List';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import CustomAvatar from 'routes/CustomAvatar';

class MemberList extends Component {
    render(){<MuiThemeProvider> 
        <List>
            <ListItem 
                leftAvatar={<CustomAvatar avatarPic={false}/>}
                primaryText={"Mike Tailor"}
                secondaryText={"This is first text"}
                secondaryTextLines={1}
                rightIconButton={<IconMenu iconButtonElement={iconButtonElement}>
                  <MenuItem>Add friend</MenuItem>
                  <MenuItem>Chat</MenuItem>              
                </IconMenu>}/>

            <ListItem 
                leftAvatar={<CustomAvatar avatarPic={true}/>}
                primaryText={"Kory Becker"}
                secondaryText={"This is second text"}
                secondaryTextLines={1}
                rightIconButton={<IconMenu iconButtonElement={iconButtonElement}>
                  <MenuItem>Add friend</MenuItem>
                  <MenuItem>Chat</MenuItem>              
                </IconMenu>}/>
        </List>
    </MuiThemeProvider>}
}

export default withRouter(MemberList);

---

CustomAvatar / index.js

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import Avatar from 'material-ui/Avatar';

class CustomAvatar extends Component {
    render(){                               
        if(this.props.avatarPic){           
            return(<Avatar size={40} src={"http://www.example.com/myimage.png"} />) 
        }else{
           return(<Avatar size={40}>A</Avatar>)
        }       
    }
}

export default withRouter(CustomAvatar);

Answer 1

問題的原因

造成您的問題的原因是，material-ui v0庫期望leftAvatar道具是Avatar組件，因此依賴於幕后的Avatar內部值。 由於您的CustomAvatar不是直接的Avatar ，material-ui找不到這些內部結構，因此樣式不起作用。

具體來說，如果您看一下ListItem的來源 ，您會注意到pushElement函數將采用子組件（如leftAvatar並通過設置style prop來分配樣式：

pushElement(children, element, baseStyles, additionalProps) {
  if (element) {
    const styles = Object.assign({}, baseStyles, element.props.style);
    children.push(
      React.cloneElement(element, {
        key: children.length,
        style: styles,
        ...additionalProps,
      })
    );
  }
}

您的CustomAvatar不使用此style道具，因此您永遠不會收到必要的CSS樣式。 這就是布局問題的原因。

根據您是否願意升級到v1，您有幾個解決方法。

修復它的代碼

class CustomAvatar extends Component {
  render() {
    const { showPicture, ...other } = this.props;

    if (showPicture) {
      return (<Avatar size={40} {...other} src={"http://www.example.com/myimage.png"} />);
    } else {
      return (<Avatar size={40} {...other}>A</Avatar>);
    }
  }
}

如上所述， pushElement函數設置style prop。 現在，您沒有使用它，因此您的Avatar不會樣式化。 {...other}將此道具傳播到您的Avatar以便它們獲得正確的樣式，並且您的布局可以正常工作。

但是，您應該升級到v1

v1應該會在2018年初發布穩定版本，並且可以解決許多此類問題。 您不必花時間解決這類問題並使用v0，而應該升級並學習新的方法（而且，恕我直言，還是改進的）。

Answer 2

我也遇到了同樣的問題，您可以通過將自定義組件包裝到material-ui的PAPER組件中來解決此問題。 請參見下面的代碼：

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {List, ListItem} from 'material-ui/List';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import CustomAvatar from 'routes/CustomAvatar';
import Paper from 'material-ui/Paper';


class MemberList extends Component {
    render(){<MuiThemeProvider> 
    <List>
        <ListItem 
            leftAvatar={<Paper zDepth={2} circle={true}><CustomAvatar avatarPic={false}/></Paper>}
            primaryText={"Mike Tailor"}
            secondaryText={"This is first text"}
            secondaryTextLines={1}
            rightIconButton={<IconMenu iconButtonElement={iconButtonElement}>
              <MenuItem>Add friend</MenuItem>
              <MenuItem>Chat</MenuItem>              
            </IconMenu>}/>

        <ListItem 
            leftAvatar={<Paper zDepth={2} circle={true}><CustomAvatar avatarPic={true}/></Paper>}
            primaryText={"Kory Becker"}
            secondaryText={"This is second text"}
            secondaryTextLines={1}
            rightIconButton={<IconMenu iconButtonElement={iconButtonElement}>
              <MenuItem>Add friend</MenuItem>
              <MenuItem>Chat</MenuItem>              
            </IconMenu>}/>
    </List>
</MuiThemeProvider>}

}

用Router（MemberList）導出默認值;