import React, { Component } from 'react';
import './App.css';
import Screen from './ponents/Screen/Screen';
import Button from './ponents/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;

I am simply trying to create a button with some custom colors (theme). It will work without "theme={buttonTheme}" but of course it uses the default. I get the following error:

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

thanks!!

import React, { Component } from 'react';
import './App.css';
import Screen from './ponents/Screen/Screen';
import Button from './ponents/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;

I am simply trying to create a button with some custom colors (theme). It will work without "theme={buttonTheme}" but of course it uses the default. I get the following error:

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

thanks!!

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Sep 26, 2018 at 0:43 NumnumberryNumnumberry 39511 gold badge44 silver badges1717 bronze badges 3

• What does your Button ponent look like? And should this line be import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; ? – Patrick Dillon Commented Sep 26, 2018 at 1:35
• @PatrickDillon YOU ARE CORRECT!!! I got that import from another example. I guess it is outdated or something. Thanks for the response. – Numnumberry Commented Sep 26, 2018 at 4:14
• @PatrickDillon.. You're my SAVIOR ..spent 3 hours to fix this...BOTTOMS UP.. – muhnizar Commented Oct 14, 2018 at 11:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

As mentioned in an earlier ment, the import statement was incorrect. This:

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

Should be this:

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

In case anybody else has a similar issue. The above answer never fixed my problem but pointed me in the correct direction I had to add

shape: {
 borderRadius: 16
}

To my material ui theme.

So this is a two step thing for you, I'm not across Material-ui, but the main issue is that the theme-shape isn't being provided to your button ponent.

The first thing i'd do is debug and log out the buttonTheme constant to confirm that it is matching the theme defined in https://material-ui./customization/default-theme/ with the addition of your overrides.

If you can see the the shape: border-radius: 4 portion then you know it is an issue with MuiProvider, but from looking at your code it seems to be correct.

Let me know what the theme looks like (Update your question) and we can work from there