How to set Material UI (withStyle) style on an external file in React?

Question

I'm trying to put all my styles in an external file to be cleaner but i can't find the solution to do it.

For exemple, i've got something like this:

  const styles = theme => ({
    appBar: {
      zIndex: theme.zIndex.drawer + 1,
      position: 'absolute',
      marginLeft: drawerWidth,
      width: '100%',
    },
  });

with this at the end of my App component:

App.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(App);

But if i'm trying to put my style outside of my component and import it, I can't access to theme.zIndex.drawer

My external style file is looking like this:

const drawerWidth = 240;

export default {
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    position: 'absolute',
    marginLeft: drawerWidth,
    width: '100%',
  },
}

I don't understand very well how it works, does someone can help me ?

Answer 1

When the style was within the App.jsx, is was a function, when you moved it to a seperate file, you made it an object.

You need to export a function, not a JSON object:

const drawerWidth = 240;

export default theme => ({
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    position: 'absolute',
    marginLeft: drawerWidth,
    width: '100%',
  },
})