主题中有一个全局边界半径形状值。你可以像这样改变它：

const theme = createMuiTheme({
  shape: {
    borderRadius: 8,
  }, 
})

或者，如果您只对按钮样式感兴趣：

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        borderRadius: 8,
      }, 
    }, 
  }, 
})

或者，您可以将按钮的全局类名作为目标：

.MuiButton-root {
  border-radius: 8px;
}

在Material UI v5.0+中，您可以通过以下方式轻松实现：

<Button type="submit" color="primary" sx={ { borderRadius: 28 } }>Enter</Button>

如果你想重复使用相同的样式，你可以从外部文件导入它，你的代码应该是这样的：

<Button type="submit" color="primary" sx={ { ...styles.button.rounded } }>Enter</Button>

或者，通过主题全局影响所有按钮（Material UI v5）：

import { createTheme } from '@mui/material';

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 28,
        },
      }, 
    }, 
  },
});

我也尝试过创建一个新的变体（v5.0中的新变体），但我认为它更复杂，因为你必须为每个添加的 prop 添加许多样式：

• createTheme函数 *

MuiButton: {
            defaultProps: {
                variant: 'contained',
                color: 'inherit'
            },
            styleOverrides: {
                containedInherit: {
                    backgroundColor: '#fff'
                }
            },
            variants: [
                {
                    props: { variant: 'rounded' },
                    style: {
                        borderRadius: 28
                    }
                },
                {
                    props: { variant: 'rounded', color: 'primary' },
                    style: {
                        color: 'white',
                        backgroundColor: '#01697d'
                    }
                }
            ]
        }

此外，使用sx prop解决方案，您可以将变体与圆形样式（概述和包含）组合。

如果你想有一个ahem很好的四舍五入的Button，使用Fab：

<Fab>
  <Icon />
</Fab>
<Fab variant="extended">
  <Icon sx={{ mr: 1 }} />
  Extended
</Fab>

我怎么能用它作为一个“圆”的 prop ？（如Vuetify）
您可以在MUI v5中添加类似rounded的自定义样式 prop ，使用styled创建原始组件的增强版本，添加额外的样式和任何您想要自定义的 prop ：

import MuiButton from '@mui/material/Button';
import { styled } from '@mui/material/styles';

const options = {
  shouldForwardProp: (prop) => prop !== 'rounded',
};
const Button = styled(
  MuiButton,
  options,
)(({ theme, rounded }) => ({
  borderRadius: rounded ? '24px' : null,
}));

<Button variant="contained">Rectangle</Button>
<Button variant="contained" rounded>
  Round
</Button>

要全局更改borderRadius，可以使用createTheme，请注意，这种方法也会影响引用theme.shape.borderRadius的其他组件，如Accordion或Skeleton：

const theme = createTheme({
  shape: {
    borderRadius: 5,
  },
});

现场演示

为什么不直接在makeStyles中添加一个borderRadius？

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1),
    borderRadius: "5em"
  },
  input: {
    display: 'none',
  },
}));

示例：https://codesandbox.io/s/material-demo-f00qi?fontsize=14

我不相信有一个material-ui类来做这个。你可以自己创建一个自定义类来实现它：

.rounded-corners {
   border-radius: 25px;
}