如何使用主题在Material-UI中更改按钮的形状？

Question

因此，Button组件上的文档有多个部分，并且在https://codesandbox.io/s/npie4处链接了一个codeandbox

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

我正在使用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

为什么不只在borderRadius中添加makeStyles？

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

我不认为有针对此的材料用户界面类。您可以自己创建一个自定义类来实现它：

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