Uncaught TypeError: can't access property "button", theme.typography is undefined

Question

I'm setting up a react application using MUI, and since we will be using styled components for our own custom styles & containers, I figure I may as well configure MUI with styled-components as per the docs. We will also be using yarn.

The package.json is defined as such:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mui/material": "^5.4.2",
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@^5.4.2",
    "styled-components": "^5.3.3"
    // etc
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@^5.4.2"
  }
  // etc
}

However after installing and running the application, the ReactDOM.render() call fails:

Uncaught TypeError: can't access property "button", theme.typography is undefined
    node_modules bundle.js:2257
    transformedStyleArg createStyled.js:185
    Ne flatten.js:80
    generateAndInjectStyles ComponentStyle.js:90
    S StyledComponent.js:80
    O StyledComponent.js:125
    O StyledComponent.js:174

The component rendering through react-router is a Login component that uses MUI's button:

import React from 'react'
import Button from '@mui/material/Button'
import { NavigateFunction, useNavigate } from 'react-router-dom'

interface Props {
  login: (nav: NavigateFunction) => void
}

export function Login({ login }: Props) {
  const navigate = useNavigate()
  return (
    <Button onClick={() => login(navigate)} variant='contained'>
      Login
    </Button>
  )
}

score 0 · Answer 1 · answered Feb 22 '22 at 16:18

Figured out the problem. The issue is that I had setup a theme provider from styled-components, but i was passing mainly an empty object.

Setting it up to instead pass a material theme fixes the issue.

import React from 'react'
import { Provider } from 'react-redux'
import { ThemeProvider } from 'styled-components'

import { store } from 'common/store'
import { theme } from './theme'
import { AppRoutes } from './core/AppRoutes'

export function App() {
  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <AppRoutes />
      </ThemeProvider>
    </Provider>
  )
}

// theme.ts
import { createTheme } from '@mui/material'

export const theme = createTheme()

Uncaught TypeError: can't access property "button", theme.typography is undefined

1 Answers1