如何使用主题更改 MUI 中按钮的形状？

Question

所以Button 组件的文档有不同的部分，还有一个 Codesandbox 链接到https://codesandbox.io/s/npie4

但是，没有地方提到如何在需要时更改按钮的形状。

我正在使用 Google Material Sketch file，我希望按钮是圆形的

如何使用 theme 对象来做到这一点，以便在我的整个应用程序中，Button 组件始终是四舍五入的？

Answer 1

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

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

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

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

或者，您可以定位按钮的全局类名：

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

Answer 2

为什么不在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

Answer 3

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

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

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

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

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

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

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

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

创建主题功能

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 解决方案，您可以将变体与圆形样式（轮廓和包含）结合起来。

Answer 4

如果你想要一个 *ahem* 圆润的Button，请使用Fab：

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

如何将它用作“圆形”道具？ （就像在 Vuetify 中一样）

您可以在 MUI v5 中添加自定义样式道具，例如 rounded，方法是使用 styled 创建原始组件的增强版本，其中包含额外的样式和您想要自定义的任何道具：

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,
  },
});

现场演示

Answer 5

我不相信有一个 material-ui 类来解决这个问题。不过，您可以自己创建一个自定义类来实现它：

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