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

Question

如何对齐 <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';

Answer 1

如果你想在常规按钮中使用图标，你应该将你的图标传递给 startIcon或 endIcon Prop (在你的情况下 endIcon )documentation .然后不要忘记传递你的所有传递的 Prop 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>