Material UI: Cannot read property 'button' of undefined

Question

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

const theme = (options: ThemeOptions) => {
    return createMuiTheme({
        palette: {
            primary: {
                main: '#b5ddd1'
            },
            secondary: {
                main: '#b2d9ea'
            },
        },
        typography: {
            fontFamily: 'Raleway, Arial',
            button: {
                fontStyle: 'italic',
            },
        },
        ...options,
    })
}

provider

import { ThemeProvider } from '@material-ui/core/styles'

         <Provider store={store}>
            <ConnectedRouter>
                <ThemeProvider theme={theme}>
                    <GlobalStyles/>
                    {/*<ErrorBoundary>*/}
                    {/*<Layout>*/}
                    <Component {...pageProps} />
                    {/*</Layout>*/}
                    {/*</ErrorBoundary>*/}
                </ThemeProvider>
            </ConnectedRouter>
        </Provider>

import Button from '@material-ui/core/Button'

            <div>
                <div>Log into APP</div>
                <Button>Test</Button>
            </div>

But I am still getting error in Button.js

at styles (/Users/filipbrezina/Documents/Projekty/sportee-frontend/node_modules/ material-ui/core/Button/Button.js:33:78

Can someone help me please? I don't know what am I doing wrong 😏

Can you please add codesandbox URL so that we can help you debug the issue. — Sahil Paudel
– Sahil Paudel, Commented May 11, 2020 at 16:08

Ajeet Shah · Accepted Answer · 2020-05-11 18:42:34Z

4

There is an error in the way you are defining / providing the theme:

You need to provide it like this:

<ThemeProvider theme={theme({})}> {/* function call: theme({}) */}

Or if you define it like this:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#b5ddd1',
    },
    // you can add more options
  }
})

you can provide it this way:

<ThemeProvider theme={theme}>

edited May 11, 2020 at 18:42

answered May 11, 2020 at 18:37

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material UI: Cannot read property 'button' of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related