使用 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';