Material UI v0.20.0 使用自定义Avatar组件时ListItem对齐异常求助

嘿，我帮你排查这个对齐异常的问题！在Material UI v0.20.0版本里，当你给ListItem的leftAvatar传递自定义组件时，很容易因为组件层级或样式继承的问题导致布局错位，咱们来一步步修复它。

问题根源 #

你的CustomAvatar组件被withRouter高阶组件包裹了，但实际上这个组件并没有用到任何路由相关的props（比如history、location）。这种多余的包裹会给ListItem传递一个额外的组件层级，破坏了ListItem对leftAvatar的默认样式布局逻辑——ListItem期望leftAvatar直接接收MUI的Avatar元素，而非被高阶包装后的组件。

解决方案1：移除不必要的withRouter包裹 #

既然CustomAvatar不需要路由相关功能，直接去掉withRouter包裹就能解决问题：

修改CustomAvatar/index.js：

import React, {Component} from 'react';
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 CustomAvatar; // 移除withRouter

解决方案2：如果必须保留withRouter（比如需要路由props） #

如果之后你需要在CustomAvatar里使用路由相关功能，那可以给组件添加与ListItemleftAvatar匹配的样式，确保布局对齐：

修改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(){
    // 添加ListItem leftAvatar期望的基础样式
    const wrapperStyle = {
      display: 'inline-block',
      verticalAlign: 'middle'
    };
    
    if(this.props.avatarPic){
      return(
        <div style={wrapperStyle}>
          <Avatar size={40} src={"http://www.example.com/myimage.png"} />
        </div>
      )
    }else{
      return(
        <div style={wrapperStyle}>
          <Avatar size={40}>A</Avatar>
        </div>
      )
    }
  }
}

export default withRouter(CustomAvatar);

测试验证 #

修改完成后重新运行项目，你会发现ListItem的leftAvatar和文本内容已经能正常对齐了。

内容的提问来源于stack exchange，提问作者Chandresh