При использовании кнопки MUI: TypeError: Невозможно прочитать свойство '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

Так что это для вас два шага, я не знаком с Material-ui, но главная проблема в том, что форма темы не предоставляется компоненту вашей кнопки.

Первыйя бы отладил и вышел из константы buttonTheme, чтобы подтвердить, что она соответствует теме, определенной в https://material -ui.com / customization / default-theme / , с добавлением вашейпереопределяет.

Если вы видите часть shape: border-radius: 4, то вы знаете, что это проблема с MuiProvider, но, глядя на ваш код, она кажется правильной.

Дайте мне знать, чтотема выглядит так (обновите свой вопрос) и оттуда мы можем работать