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

Question

Button 组件的文档有多个部分，还有一个链接在 https://codesandbox.io/s/npie4 的 Codesandbox。

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

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

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

Answer 1

主题中有一个全局的border radius shape值。您可以这样更改它:

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

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

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

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

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