如何使用主题更改 material-ui 中按钮的形状？

Question

所以关于Button组件的文档有各个部分，还有一个链接在https://codesandbox.io/s/npie4的代码和框

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

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

我如何使用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

在 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 中的新变体）进行了尝试，但我认为更复杂，因为您必须通过添加的每个道具添加许多样式：

创建主题函数

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 3

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

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

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

rounded您可以像在MUI v5中一样添加自定义样式道具，方法是使用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.borderRadiusAccordionSkeleton

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

现场演示