如何正确对齐按钮内的material-ui图标？答案

【问题标题】：How to align material-ui icon inside a button properly?如何正确对齐按钮内的material-ui图标？
【发布时间】：2021-08-19 12:21:01
【问题描述】：

如何正确对齐 <ChevronRightIcon> 内的 <PrimaryButton>。我想要它在右边的按钮标签之后。

<PrimaryButton style={{
                paddingRight: '26px'
                }} 
                label="Open Button"
                aria-controls="simple-menu"
                aria-haspopup="true"
                onClick={this.handleOpenMenu.bind(this)
                }
                className={classes.progress}
                color="#fff"
                >
                   <ChevronRightIcon></ChevronRightIcon>
 </PrimaryButton>

<ChevronRightIcon> 来自 material-ui，<PrimaryButton> 是自创的。

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
export default function PrimaryButton(props) {
  const style = {
    height: 36,
    boxShadow: 'none',
    ...props.style,
  };
  return (
    <RaisedButton {...props} primary style={style} name="primary-button">
      {props.children}
    </RaisedButton>
  )
}

PrimaryButton.muiName = 'RaisedButton';

【问题讨论】：

最简单的解决方案可能是使用 Material-UI Button 类。请参阅：Button - Buttons with icons and label 我猜您当前正在使用自己的组件，因为 PrimaryButton 不是由 Material-UI 定义的。如果不知道PrimaryButton 的内容，就无法帮助您进行自定义布局。
我会为有问题的参考添加 PrimaryButton 代码

标签： javascript reactjs material-ui

【解决方案1】：

如果您想在常规按钮中使用图标，您应该将您的图标传递给 startIcon 或 endIcon 道具（在您的情况下为 endIcon）documentation。然后不要忘记将您的PrimaryButton 的所有传递道具传递给您的<Button/> 组件。

<PrimaryButton
  endIcon={<ChevronRightIcon />}
  style={{
    paddingRight: '26px',
  }}
  label="Open Button"
  aria-controls="simple-menu"
  aria-haspopup="true"
  onClick={this.handleOpenMenu.bind(this)}
  className={classes.progress}
  color="#fff"
/>

// import ChevronRightIcon from '@material-ui/icons/ChevronRight';
const icon = (name) => (props) => <MaterialUI.Icon {...props} children={name} />;
const ChevronRightIcon = icon("chevron_right");

function Demo() {
  return (
    <PrimaryButton
      endIcon={<ChevronRightIcon />}
      label="Open Button"
      variant="contained"
      // ...
    />
  );
}

function PrimaryButton({label, ...props}) {
  return (
    <MaterialUI.Button
      {...props}
      color="primary"
      children={label}
    />
  );
}

ReactDOM.render(<Demo />, document.querySelector("#demo"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script crossorigin src="https://unpkg.com/@material-ui/core@4/umd/material-ui.development.js"></script>
<div id="demo"></div>

【讨论】：