Material-ui Drawer不適用於單獨的CSS文件

Question

我正在創建類似於Mini Variant抽屜演示的補充工具欄，但是我的項目指定所有CSS格式必須在單獨的CSS文件中完成，而不是在抽屜的js文件中完成（就像material-ui演示一樣）。 我已經弄清楚了如何根據演示格式化抽屜，但是現在我需要弄清楚如何將css分離出來並使其可行。

現在，抽屜使用默認設置進行渲染，但是除了一個CSS類之外，所有其他類均無法工作/渲染。 只有一個listItem可以工作並更改ListItem的高度，這很奇怪。 所有其他CSS類都不會更改抽屜的外觀。

這是不起作用的版本，其中導入了單獨的css文件：

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

這是只有一個.js文件的工作版本，其中css為const樣式：

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

Answer 1

您可以創建具有樣式但作為.js文件的單獨文件，並在組件中引用它。

material-UI使用CSS-in-js引用此鏈接： https : //material-ui.com/customization/css-in-js/

在您的方案中，您可以在與組件（或所需的任何位置）相同的文件夾中創建一個styles.js文件，如下所示：

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

並將其在組件中稱為：

import styles from "./styles"

... component ...

export default withStyles(styles)(Sidebar);

在此處找到有關如何覆蓋Material-UI組件樣式的更多詳細信息： https : //material-ui.com/customization/overrides/

希望這會幫助你。