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











up vote
0
down vote

favorite












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);









share|improve this question




























    up vote
    0
    down vote

    favorite












    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);









    share|improve this question


























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      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);









      share|improve this question















      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);






      javascript css reactjs material-ui






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 5 at 19:52

























      asked Nov 5 at 19:39









      maranathaman

      208




      208
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote



          accepted










          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.






          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53161106%2fmaterial-ui-drawer-doesnt-work-with-separate-css-file%23new-answer', 'question_page');
            }
            );

            Post as a guest
































            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            1
            down vote



            accepted










            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.






            share|improve this answer

























              up vote
              1
              down vote



              accepted










              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.






              share|improve this answer























                up vote
                1
                down vote



                accepted







                up vote
                1
                down vote



                accepted






                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.






                share|improve this answer












                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 6 at 5:17









                Nadun

                988610




                988610






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53161106%2fmaterial-ui-drawer-doesnt-work-with-separate-css-file%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest




















































































                    這個網誌中的熱門文章

                    Xamarin.form Move up view when keyboard appear

                    Post-Redirect-Get with Spring WebFlux and Thymeleaf

                    Anylogic : not able to use stopDelay()