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

Related issues

newoga picture newoga  路  3Comments

mattmiddlesworth picture mattmiddlesworth  路  3Comments

chris-hinds picture chris-hinds  路  3Comments

mb-copart picture mb-copart  路  3Comments

sys13 picture sys13  路  3Comments