transition doesn't work under <Styled></Styled>

[solayao]

hi,
when i use the model i found the css transition didn't work as normal.
and the demo such like this:

const Styled = createStyled(theme => ({
      appBar: {
       width: '100%',
        transition: theme.transitions.create(['margin', 'width'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
      },
      appBarShift: {
       width: '50%',
        transition: theme.transitions.create(['margin', 'width'], {
          easing: theme.transitions.easing.easeOut,
          duration: theme.transitions.duration.enteringScreen,
        }),
      },
    }), { withTheme: true });

 <MyHeader className={classNames(showDrawler ? classes.appBar : classes.appBarShift)} />

but it work like this

@withStyles((theme) => ({
  appBar: {
    width: '100%',
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    width: '50%',
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
}), {withTheme: true})
class TestHeader extends Component {
   render() {
    const { classes } = this.props;
     return (
        <MyHeader className={classNames(showDrawler ? classes.appBar : classes.appBarShift)} />
     )
 }
}

[jedwards1211]

Thanks for the report, I just wanted to check, are you wrapping with Styled like this inside your render function? I didn't see it in your first code sample but maybe you just omitted it:

<Styled>
  {({classes}) => (
    <MyHeader className={classNames(showDrawler ? classes.appBar : classes.appBarShift)} />
  )}
</Styled>

[solayao]

yes, i had just did that.
and this is my demo url: https://github.com/solayao/dizzy_comic_fe/blob/master/src/main/App.js .
i found that the css is added to dom, but it isn't worked

[jedwards1211]

@solayao okay, thanks!
I see that you call createStyled inside your render function -- I think this is causing your problem.
This is creating a new Styled component class each time, which causes React to remount everything under it, preventing transitions. You should create the Styled component outside of your render function, so that React will see that it is the same component class on each render and not remount everything under it, so transitions should work.

Let me know if this works:

import React, { Component } from 'react';
import Proptypes from 'prop-types';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import { observer, inject } from 'mobx-react';
import Routes from './Routes';
import './App.css';

import MyHeader from '../components/MaterialComponents/AppBarHeader';
import MyFooter from '../components/FooterComponent';
import DrawerModel from '../components/MaterialComponents/DrawerModel';

import CssBaseline from '@material-ui/core/CssBaseline';

import createStyled from 'material-ui-render-props-styles';

const styles = (theme) => ({
  appBar: {
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerPaper: {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
});

const Styled = createStyled(styles);

@withRouter
@inject('store')
@observer
class App extends Component {
  render() {
    const { store, classes } = this.props;
    const { showDrawler } = store;

    return (
      <Styled>
      {
        ({classes}) => (
          <div className="App">
            <CssBaseline />
    
            <MyHeader orClassName={classNames(showDrawler && 'dUi-ab-shift', showDrawler ? classes.appBar : classes.appBarShift)} />
            <DrawerModel open={showDrawler} />
    
            <div className="ignore"><Routes /></div>
    
            <MyFooter />
          </div>
        )
      }
      </Styled>
    );
  }
}

App.propTypes = {
  store: Proptypes.object,
}

export default App;

[solayao]

@jedwards1211 thanks a lot, it worked!

[solayao]

@jedwards1211 Anyway, i found your model isn't support es5.
when i use CRA to build a project, but it came up with error:

Failed to minify the code from this file:

        ./node_modules/_material-ui-render-props-styles@4.0.4@material-ui-render-props-styles/es/index.js:7:15

Read more here: http://bit.ly/2tRViJ9

and i found the reason from CRA Issues is that module not providing an ES5 distro.

[jedwards1211]

Hmmm, this module provides both ES5 and ES6. ES5 is at index.js and ES6 is at es/index.js, and the package.json has

  "main": "index.js",
  "module": "es/index.js"

The CRA docs almost make it sound like it should be able to handle this situation but I don't think it actually does. I think it defaults to using module.
Does it work if you change your import statement to this?

import createStyled from 'material-ui-render-props-styles/index'

[solayao]

yes, this way actually bulid successful. thanks a lot.

[jedwards1211]

@solayao you're welcome. I'm looking into whether making a PR to create-react-app to tell webpack to prioritize the main field over the module field would solve this issue.

[jedwards1211]

@solayao alright my PR to make this easier for create-react-app users is linked above. Hopefully they merge it soon. I also added a tip for using with create-react-app in my README.md. Thanks for reporting this!