Attempting to break down the components of my dashboard into smaller parts has proven challenging due to their dependence on drawerWidth. Initially, I considered moving drawerWidth into the state so it can be passed down to each component. However, I encountered an issue with the variable styles, which also relies on drawerWidth. Upon reviewing material-ui documentation and reference projects, it became apparent that styles are typically located outside the class.
I made an attempt to place both variables inside the class and passed the function into withStyles through a class reference, but unfortunately, this approach failed. The page's CSS appeared distorted, and I received a warning indicating that an invalid function was passed to withStyles as shown below:
export default withStyles(DashboardLayout.styles)(DashboardLayout);
https://i.sstatic.net/lz1m7.png The original code snippet looks like this.
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
...
// All the imported components and styles
...
export default withStyles(styles)(DashboardLayout);
https://i.sstatic.net/jlr5X.png
The goal is to separate the drawer and appbar into their respective files without the need to hardcode drawerWidth and styles in each file.