如何正确对齐按钮内的Material-UI图标？——实现<ChevronRightIcon>在自定义<PrimaryButton>标签右侧的布局

看起来你遇到的问题是默认情况下，Material-UI的RaisedButton会分别渲染label属性和传入的children，导致图标无法和按钮文本正确对齐到右侧。下面我给你两种可行的解决方案：

方案一：修改PrimaryButton的封装逻辑（推荐） #

这种方法把按钮文本和图标的布局逻辑封装到自定义组件里，后续使用时不用重复写样式，更简洁统一。

修改你的PrimaryButton代码，将label和children放到一个flex容器中，通过flex布局实现文本靠左、图标靠右的效果：

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

export default function PrimaryButton(props) {
  const style = {
    height: 36,
    boxShadow: 'none',
    ...props.style,
  };

  // 创建包含文本和图标的容器，用flex布局控制对齐
  const buttonContent = (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'space-between', 
      alignItems: 'center', 
      width: '100%',
      padding: '0 12px' // 可根据需求调整内边距
    }}>
      {props.label}
      {props.children}
    </div>
  );

  // 解构label属性，避免传递给RaisedButton导致重复渲染
  const { label, ...restProps } = props;

  return (
    <RaisedButton {...restProps} primary style={style} name="primary-button">
      {buttonContent}
    </RaisedButton>
  )
}

PrimaryButton.muiName = 'RaisedButton';

修改后，你原来的调用代码不需要改动，直接使用就会自动实现文本和图标的左右对齐。

方案二：在调用时直接调整样式（无需修改组件） #

如果你不想改动PrimaryButton的封装，可以在使用时移除label属性，把按钮文本和图标放到同一容器中，利用flex布局和margin-left: auto让图标靠右：

<PrimaryButton 
  style={{ padding: '0 26px', display: 'flex', alignItems: 'center' }} 
  aria-controls="simple-menu" 
  aria-haspopup="true" 
  onClick={this.handleOpenMenu.bind(this) } 
  className={classes.progress} 
  color="#fff" 
>
  <span>Open Button</span>
  <ChevronRightIcon style={{ marginLeft: 'auto' }} />
</PrimaryButton>

这里的关键是marginLeft: 'auto'，它会把图标自动推到容器的最右侧，同时保持和文本垂直居中。

注意事项 #

• 使用方案二时，一定要移除原来的label属性，否则RaisedButton会同时渲染label文本和你传入的children内容，导致文本重复显示。
• 可以根据按钮的实际尺寸调整容器的padding值，让内容看起来更协调。

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