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);
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);
1 Answer
Reset to default 6you can create a separate file with styles but as .js files and refer it in the ponent.
material-UI uses CSS-in-js referer this link:https://material-ui./customization/css-in-js/
In your scenario, you can create a styles.js file in the same folder with the ponent(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 ponent as:
import styles from "./styles"
... ponent ...
export default withStyles(styles)(Sidebar);
find more details about how to override styles of material-UI ponents from here: https://material-ui./customization/overrides/
hope this will help you.