Material-ui 按钮中的垂直分隔线

Question

我只是想在按钮中的文本和图标之间放置一个垂直分隔线，但我总是得到一个水平分隔线。我的（简化的）组件如下：

import React from 'react';
import Button from '@material-ui/core/Button';
import Divider from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { Clear } from '@material-ui/icons';

export default function CancelButton({handleClick}) {

  return (
    <Button onClick={handleClick} color="primary" variant="contained">
      <Typography>Cancel</Typography>
      <Divider orientation="vertical" flexItem={true} />
      <Clear />
    </Button>
  );
}

最终看起来像

我在这里错过了什么？

Answer 1

原因是您从 Button 导入了 Divider

import Divider from '@material-ui/core/Button';

Material-ui 按钮中的垂直分隔线

Material-ui vertical divider in a button

button

reactjs

material-ui