时间戳

首页 > 解决方案 > 如何正确对齐按钮内的material-ui图标？

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

问题描述

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

标签： javascriptreactjsmaterial-ui

解决方案

如果您想在常规按钮中使用图标，您应该将您的图标传递给startIcon或endIcon支持（在您的情况下endIcon）文档。然后不要忘记将您传递的所有道具传递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>

推荐阅读