CODEWITHSUNDEEP
reactjsmaterial-uiformsy-material-uiformsy-react
Mohammad Arif
Mohammad Arif

Reputation: 7581

Material UI - muiTheme.prefix is not a function issue

I have recently migrated to Google Material UI (Material UI v0.15.0-beta.1) from v0.14.4, due to latest reactjs v15.0.1, have also upgraded the formsy-material-ui and formsy-react wrapper for form validations.

It's a big code architecture, apologies couldn't attach the code snippet, anyways I am getting an error which is saying muiTheme.prefix is not a function.

Though I have been following the guidelines provided by the material ui change log document at https://github.com/callemall/material-ui/blob/master/CHANGELOG.md

Hope to get some help, let me know, if anything needed to explain the issue better.

Upvotes: 1

Views: 1392

Answers (2)

Mohammad Arif
Mohammad Arif

Reputation: 7581

Got the issue, I was missing the theme context lightBaseTheme to be passed in getMuiTheme method as given below.

  getChildContext() {
    return {muiTheme: getMuiTheme(lightBaseTheme)};
  }

Upvotes: 1

Johnny Magrippis
Johnny Magrippis

Reputation: 729

My guess would be you didn't do anything about this breaking change:

As of now you will need to provide theme on context, see: http://www.material-ui.com/#/customization/themes

So material-ui seems to break now if you don't specify the theme. You could probably wrap your whole app inside the MuiThemeProvider and get it back to working.

You'd need something like:

...
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"
import getMuiTheme from "material-ui/styles/getMuiTheme"
// import the colors wanted to customize your theme here, if you want to
import { orange500 } from "material-ui/styles/colors"
...
// customize your theme here
const muiTheme = getMuiTheme({
  palette: {
    accent1Color: orange500
  }
})
...
class MyApp extends Component {


  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
          <Header />
          <Body />
          <Footer />
        </div>
      </MuiThemeProvider>
    )
  }
}

One thing to watch out for is that MuiThemeProvider expects just one child, so there's no avoiding that encapsulating div; you could, of course, create another AppContainer component if you'd like things to be cleaner, but you get the idea.

Upvotes: 0

Related Questions