使用 MUI 按钮时：类型错误：无法读取未定义的属性'borderRadius'

Question

import React, { Component } from 'react';
import './App.css';
import Screen from './components/Screen/Screen';
import Button from './components/Button/Button';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import pink from '@material-ui/core/colors/pink';
const buttonTheme = createMuiTheme({
palette: {
primary: {
main: '#2dff46',
},
secondary: pink,
}
});

class App extends Component {
render() {
return (
<MuiThemeProvider theme={buttonTheme}>
<Screen>
<div>Hello</div>
<Button variant='contained' color='primary'>
GO
</Button>
</Screen>
</MuiThemeProvider>
);
}
}
export default App;

我只是尝试创建一个带有一些自定义颜色(主题(的按钮。它将在没有"theme={buttonTheme}"的情况下工作，但当然它使用默认值。我收到以下错误：

TypeError: Cannot read property 'borderRadius' of undefined
styles
node_modules/@material-ui/core/Button/Button.js:41
38 | minWidth: 64,
39 | minHeight: 36,
40 | padding: '8px 16px',
> 41 | borderRadius: theme.shape.borderRadius,
42 | color: theme.palette.text.primary,
43 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
44 |   duration: theme.transitions.duration.short

谢谢！！

Answer 1

如前面的评论中所述，导入语句不正确。 这：

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

应该是这样的：

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

Answer 2

如果其他人有类似的问题。上面的答案从未解决我的问题，但为我指明了我必须添加的正确方向

shape: {
borderRadius: 16
}

到我的材料 ui 主题。

Answer 3

所以这对你来说是一个两步的事情，我不是在 Material-ui，但主要问题是主题形状没有提供给你的按钮组件。

我要做的第一件事是调试并注销buttonTheme常量，以确认它与添加覆盖 https://material-ui.com/customization/default-theme/中定义的主题匹配。

如果您可以看到shape: border-radius: 4部分，那么您就知道这是MuiProvider的问题，但是从您的代码来看，它似乎是正确的。

让我知道主题是什么样子的(更新您的问题(，我们可以从那里开始工作