以嵌套方式使用material-ui v1的withStyles

Question

So I have this component that I am trying to write in react manner. Where each of the major containers are separated as React class component. Now I know how to use withStyles with one component : export default withStyles(styles)(MyComponent);

But when you have more than two components, how do you use withStyles. Here's the code :

    class AtmanPage extends Component {
  render() {
    return (
      <AtmanAppBar />
    );
  }
}


class AtmanAppBar extends Component {
  render() {
    return (
      <div className= {this.props.classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton className= {this.props.classes.menubutton} color="contrast" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography type="title" color="inherit" className={this.props.classes.flex}>
            Title
          </Typography>
          <Button color="contrast">Login</Button>
        </Toolbar>
      </AppBar>
          </div>
    );
  }
}

const styles = theme => ({
  root: {
    marginTop: theme.spacing.unit * 3,
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
});

export default withStyles(styles) AtmanPage ?;

Now the question mark is about what else should be done to pass the styles as a prop to AtmanAppBar through AtmanPage.

Answer 1

Your issue is not related to withStyles but in the way you organize your components and exports.

Solution 1:

You can put each component in a separate file and use

export default withStyles(styles)(MyComponent);

in each file as you have mentioned in your post.

Solution 2:

You can do a simple export for both of your classes if you wish to keep them in the same file:

export const StyledAtmanAppBar = withStyles(styles)(AtmanAppBar);
export const StylesAtmanPage = withStyles(styles)(AtmanPage);

Then you need to import them like so in another file:

import {StyledAtmanAppBar, StylesAtmanPage} from './path/to/your/file';

Answer 2

Looking to handle this shizzle myself I came across a helpful util to use Styled-Components™-like API via Material-UI.

Gist example

After importing it as:

import styled from '../utils/styled';

you can create many Styled-Components-lookalikes in one file:

const List = styled('ul')(theme => ({
  padding: theme.spacing.unit,
  margin: 0,
}));

One difference with default withStyles() API is, that this util applies the styles to the root class, so you cannot nest many styles styles for one component (probably could be easily upgraded to allow that tbh).

But it's really handy for simple styles re-usability without the need to create too many files.

Credit to the (probable) author