CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
interdevwebeloper
interdevwebeloper

Reputation: 157

Material-ui Drawer doesn't work with separate css file

I'm creating a Sidebar similar to the Mini Variant drawer demo, but my project specifies that all the css formatting must be done in a separate css file, not in the drawer's js file (as the material-ui demos do). I've figured out how to format my drawer according to the demos, but now I need to figure out how to separate out the css and make it workable.

Right now the drawer renders with default settings, but all but one of the css classes aren't working/rendering. Only one, listItem, works and changes the height of a ListItem, which is weird. All the other css classes don't change how the drawer looks.

This is the non-working version with a separate css file imported in:

.root {
    display: flex;
}

.drawerOpen {
    top: 70px; 
    bottom: 70px;
    position: fixed;
    white-space: nowrap; /*text doesn't shrink into side*/
    width: 240;
    transition: width 2s;
}

.drawerClose {
    top: 70px; 
    bottom: 70px;
    position: fixed;
    width: 240;
    overflow-x: hidden; /*hides text when drawer is closed*/
    transition: width 2s;
}

.iconButton {
    margin-top: 15px;
    margin-bottom: 7px;
}

.listItem { 
    height: 75px;
}

SideBar.js:

import React, { Component } from "react";
import PropTypes from "prop-types";
import Drawer from "@material-ui/core/Drawer";
import { withStyles } from "@material-ui/core/styles";
import { IconButton, Divider, ListItemIcon } from "@material-ui/core";
import { List, ListItem, ListItemText } from "@material-ui/core";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import "../css/SideBar.css";

import "../css/SideBar.css";

class Sidebar extends Component {
  state = {
    open: false
  };

  handleSidebarToggle = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    const { classes } = this.props;
    const { open } = this.state;

    return (
      <div className="root">
        <Drawer
          variant="permanent"
          anchor="left"
          open={open}
          className={(open === true) ? "drawerOpen" : "drawerClose"}
        >
          <div>
            <Divider />
            <IconButton
              className="iconButton"
              onClick={this.handleSidebarToggle}
            >
              {open === false ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </div>
          <List>
            <Divider />
            <ListItem className="listItem" button>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary="Info" />
            </ListItem>
            <Divider />
            <ListItem className="listItem" button>
              <ListItemIcon>
                <MailIcon />
              </ListItemIcon>
              <ListItemText primary="Roofing" />
            </ListItem>
            <Divider />
            <ListItem className="listItem" button>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary="Siding" />
            </ListItem>
            <Divider />
            <ListItem className="listItem" button>
              <ListItemIcon>
                <MailIcon />
              </ListItemIcon>
              <ListItemText primary="Windows" />
            </ListItem>
            <Divider />
            <ListItem className="listItem" button>
              <ListItemIcon>
                <MailIcon />
              </ListItemIcon>
              <ListItemText primary="Shop" />
            </ListItem>
            <Divider />
          </List>
        </Drawer>
      </div>
    );
  }
}
export default Sidebar;

This is the working version in just one .js file with the css in the const styles:

import React, { Component } from "react";
import PropTypes from "prop-types";
import Drawer from "@material-ui/core/Drawer";
import { withStyles } from "@material-ui/core/styles";
import { IconButton, Divider, ListItemIcon } from "@material-ui/core";
import { List, ListItem, ListItemText } from "@material-ui/core";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import "../css/SideBar.css";

const styles = theme => ({
  root: {
    display: "flex",
  },
  drawerPaper: {
    top: "70px", //moves Sidebar below AppBar
    bottom: "70px",
    position: "fixed",
    whiteSpace: "nowrap", //text doesn't shrink into side
    width: 240,
    transition: theme.transitions.create("width", {
      //makes transitions smooth
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    })
  },
  drawerPaperClose: {
    overflowX: "hidden", //display mini sidebar
    width: theme.spacing.unit * 7,
    [theme.breakpoints.up("sm")]: {
      width: theme.spacing.unit * 9
    },
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  },
  iconButton: { //fixes spacing 
    marginTop: "15px",
    marginBottom: "7px"
  },
  listItem: { 
    height: "75px"
  }
});

class Sidebar extends Component {
  state = {
    open: false
  };

  handleSidebarToggle = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    const { classes } = this.props;
    const { open } = this.state;

    return (
      <div className={classes.root}>
        <Drawer
          variant="permanent"
          anchor="left"
          open={open}
          classes={{
            paper: classNames(
              classes.drawerPaper,
              !open && classes.drawerPaperClose
            )
          }}
          className="drawer"
        >
          <div>
            <Divider />
            <IconButton
              className={classes.iconButton}
              onClick={this.handleSidebarToggle}
            >
              {open === false ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </div>
          <List>
            <Divider />
            <ListItem className={classes.listItem} button>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary="Info" />
            </ListItem>
            <Divider />
            <ListItem className={classes.listItem} button>
              <ListItemIcon>
                <MailIcon />
              </ListItemIcon>
              <ListItemText primary="Roofing" />
            </ListItem>
            <Divider />
            <ListItem className={classes.listItem} button>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary="Siding" />
            </ListItem>
            <Divider />
            <ListItem className={classes.listItem} button>
              <ListItemIcon>
                <MailIcon />
              </ListItemIcon>
              <ListItemText primary="Windows" />
            </ListItem>
            <Divider />
            <ListItem className={classes.listItem} button>
              <ListItemIcon>
                <MailIcon />
              </ListItemIcon>
              <ListItemText primary="Shop" />
            </ListItem>
            <Divider />
          </List>
        </Drawer>
      </div>
    );
  }
}

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

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

Upvotes: 0

Views: 5592

Answers (1)

Nadun
Nadun

Reputation: 7853

you can create a separate file with styles but as .js files and refer it in the component.

material-UI uses CSS-in-js referer this link:https://material-ui.com/customization/css-in-js/

In your scenario, you can create a styles.js file in the same folder with the component(or any place you wish) like below:

export default const styles = {
  .root {
    display: flex;
  }

  .drawerOpen {
    top: 70px; 
    bottom: 70px;
    position: fixed;
    white-space: nowrap; /*text doesn't shrink into side*/
    width: 240;
    transition: width 2s;
  }

  .drawerClose {
    top: 70px; 
    bottom: 70px;
    position: fixed;
    width: 240;
    overflow-x: hidden; /*hides text when drawer is closed*/
    transition: width 2s;
  }

  .iconButton {
    margin-top: 15px;
    margin-bottom: 7px;
  }

  .listItem { 
    height: 75px;
  }
}

and refer it in the component as:

import styles from "./styles"

... component ...

export default withStyles(styles)(Sidebar);

find more details about how to override styles of material-UI components from here: https://material-ui.com/customization/overrides/

hope this will help you.

Upvotes: 6

Related Questions