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

Posted 2023-02-22

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

【英文标题】：How do I change the shape of a button in MUI using theme?

【发布时间】：2019-12-20 13:27:50

【问题描述】：

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

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

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

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

【问题讨论】：

这些按钮已经存在于material ui中，material-ui.com/components/floating-action-button

【参考方案1】：

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

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

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

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

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

.MuiButton-root 
  border-radius: 8px;
 

【讨论】：

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

【参考方案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

【讨论】：

谢谢，不过，我需要把它放在theme 中，所以我接受了另一个答案，但是当有人需要做一次性工作时，你的作品也是如此

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

【讨论】：

太棒了，正是我想要的。不知道这存在。

【参考方案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,
  ,
);

现场演示

【参考方案5】：

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

.rounded-corners 
   border-radius: 25px;