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存在问题，但是从查看您的代码来看，这似乎是正确的。

让我知道主题的外观（更新您的问题），我们可以从那里开始工作

使用MUI按钮时：TypeError：无法读取未定义的属性'borderRadius'

2 个答案: