Javascript 物料ui抽屉不'；不能使用单独的css文件

我正在创建一个类似于的侧栏，但我的项目指定所有css格式必须在一个单独的css文件中完成，而不是在抽屉的js文件中完成（就像材质ui演示一样）。我已经知道如何根据演示设置抽屉的格式，但现在我需要知道如何分离css并使其可行

现在抽屉使用默认设置进行渲染，但是除了一个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;

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core”导入{IconButton、Divider、ListItemIcon}；
从“@material ui/core”导入{List，ListItem，ListItemText}；
从“@material ui/icons/MoveToInbox”导入收件箱；
从“@material ui/icons/Mail”导入MailIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
导入“./css/SideBar.css”；
导入“./css/SideBar.css”；
类边栏扩展组件{
状态={
开放：假
};
handleSidebarToggle=（）=>{
this.setState（{open:！this.state.open}）；
};
render（）{
const{classes}=this.props；
const{open}=this.state；
返回(
{open==false？：}
);
}
}
导出默认边栏；

这是一个.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);

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core”导入{IconButton、Divider、ListItemIcon}；
从“@material ui/core”导入{List，ListItem，ListItemText}；
从“@material ui/icons/MoveToInbox”导入收件箱；
从“@material ui/icons/Mail”导入MailIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
导入“./css/SideBar.css”；
常量样式=主题=>({
根目录：{
显示：“flex”，
},
抽屉纸：{
顶部：“70px”//将侧栏移动到AppBar下方
底部：“70px”，
位置：“固定”，
空白：“nowrap”，//文本不会收缩到侧面
宽度：240，
过渡：theme.transitions.create（“宽度”{
//使过渡平滑
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.enteringScreen
})
},
抽屉纸关闭：{
overflowX：“隐藏”//显示迷你侧边栏
宽度：theme.spacing.unit*7，
[主题.breakpoints.up（“sm”）]：{
宽度：theme.spacing.unit*9
},
过渡：theme.transitions.create（“宽度”{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen
})
},
图标按钮：{//固定间距
玛金托普：“15px”，
marginBottom：“7px”
},
列表项：{
高度：“75px”
}
});
类边栏扩展组件{
状态={
开放：假
};
handleSidebarToggle=（）=>{
this.setState（{open:！this.state.open}）；
};
render（）{
const{classes}=this.props；
const{open}=this.state；
返回(
{open==false？：}
);
}
}
侧栏.propTypes={
类：PropTypes.object.isRequired，
主题：PropTypes.object.isRequired
};
使用样式导出默认值（样式，{withTheme:true}）（侧栏）；

您可以使用样式创建一个单独的文件，但作为

.js

文件，并在组件中引用它

材质UI在js中使用CSS 请参阅此链接：

在您的场景中，您可以在组件所在的同一文件夹（或任意位置）中创建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);

从此处查找有关如何替代材质UI组件样式的更多详细信息：

---

希望这将对您有所帮助。

您可以创建一个单独的文件，其中包含样式，但作为

.js

文件，并在组件中引用它

材质UI在js中使用CSS 请参阅此链接：

在您的场景中，您可以在组件所在的同一文件夹（或任意位置）中创建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);

从此处查找有关如何替代材质UI组件样式的更多详细信息：

希望这对你有帮助