javascript - 如何使用 MuiThemeProvider 包装器和主题覆盖设置 MuiButton-outlined 的轮廓颜色和粗细？

Question

我正在使用 React 和 Material-UI API，我已经包装了根组件，<MuiThemeProvider>并且我已经成功地在我的主题中自定义了各种属性，所以我认为它设置正确。我的问题是我似乎无法更改按钮轮廓的颜色和粗细：MuiButton-outlinedPrimary. 我怀疑我使用了错误的目标名称并且文档不清楚。

这是我的主题：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {                              
    primary: {
      light: '#93D1FF',
      main: '#00A1DF',
      dark: '#005F95'
    }
  },
  typography: {
    body2: {
      fontSize: '.7rem'
    },
    caption: {
      fontSize: '.6rem'
    },
    overrides: {               
      MuiButton: {                      // Here is where I am trying to target
        outlinedPrimary: {              // the MuiButton outline property
          color: '#00A1DF',             // but it does not work!!!
          border: '3px solid #00A1DF'
        }
      }
    }
  }
});

export default theme;

我正在尝试设置轮廓，使其与palette.primary.main的颜色相同，我正在调用这样的组件：<Button variant="outlined" color="primary"> 互联网和文档上的示例似乎并没有太多是模糊的。如果有人能提供一些启示，我将不胜感激。

谢谢，丹。

标签： javascriptreactjsmaterial-ui