Material-ui: When I change transitions in the defaults variables, app crashes

Created on 12 Sep 2017  路  5Comments  路  Source: mui-org/material-ui

When I change the transitions in the default variables (like: https://material-ui-1dab0.firebaseapp.com/customization/themes/#the-other-variables), the app throws me the following error:
TypeError: theme.transitions.create is not a function

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The framework should use MY default transitions that I put on the createMuiTheme function.

Current Behavior

The app throws me the following error:
TypeError: theme.transitions.create is not a function

Steps to Reproduce (for bugs)

const materialTheme = createMuiTheme({
  transitions: {
    easing: {
      easeInOut: 'cubic-bezier(0.6, 0, 0.2, 1)',
      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
      easeIn: 'cubic-bezier(0.6, 0, 1, 1)',
      sharp: 'cubic-bezier(0.6, 0, 0.6, 1)'
    },
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      standard: 300,
      complex: 375,
      enteringScreen: 225,
      leavingScreen: 195
    }
  }
});

<MuiThemeProvider theme={materialTheme}>
  <Button raised color="accent">
    Mui Button
  </Button>
</MuiThemeProvider>

Context

The application doesn't compile.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.9 |
| React | 15.6.1 |

bug 馃悰

Most helpful comment

Sorry if unrelated, but just following up on this.
In beta 10, same code, getting
TypeError: Cannot read property 'short' of undefined in Button.js
Relevant line is:
duration: theme.transitions.duration.short

When inspecting theme, transitions doesn't contain duration. Would this be related to this merge or a separate issue entirely?

All 5 comments

Any idea how to fix it?

I have no idea, but if I put the mixin attribute with an empty object in the default theme variables, Button gets a function called gutters. The idea is to do the same behavior for transitions. If the default theme does not include the create function in the transitions, set the default as done with the mixins

I'm having same issue... thanks.

Sorry if unrelated, but just following up on this.
In beta 10, same code, getting
TypeError: Cannot read property 'short' of undefined in Button.js
Relevant line is:
duration: theme.transitions.duration.short

When inspecting theme, transitions doesn't contain duration. Would this be related to this merge or a separate issue entirely?

Any solution for this... ?

Was this page helpful?
0 / 5 - 0 ratings