首页 > 解决方案 > TypeError withstyles is not a function react export default

问题描述

我正在尝试从 material-ui 导入 withstyles,然后使用默认功能 withstyles 但总是有相同的错误。

import { withStyles } from "material-ui/styles/withStyles";
import { loginPageStyle } from "../assets/jss/material-kit-react/views/loginPage.jsx";

export default  withStyles(loginPageStyle)(LoginPage);

在这里你可以看到错误。我尝试使用 chrome 控制台进行调试,但还没有找到任何解决方案。

图像显示错误

withsStyles 对象

使用 "material-ui": "1.0.0-beta.45" 那是 loginPageStyle.. 这是 material-kit 的一个例子

import { container } from "../../material-kit-react.jsx";

const signupPageStyle = {
  container: {
    ...container,
    zIndex: "2",
    position: "relative",
    paddingTop: "20vh",
    color: "#FFFFFF"
  },
  cardHidden: {
    opacity: "0",
    transform: "translate3d(0, -60px, 0)"
  },
  pageHeader: {
    minHeight: "100vh",
    height: "auto",
    display: "inherit",
    position: "relative",
    margin: "0",
    padding: "0",
    border: "0",
    alignItems: "center",
    "&:before": {
      background: "rgba(0, 0, 0, 0.5)"
    },
    "&:before,&:after": {
      position: "absolute",
      zIndex: "1",
      width: "100%",
      height: "100%",
      display: "block",
      left: "0",
      top: "0",
      content: '""'
    }
  },
  form: {
    margin: "0"
  },
  cardHeader: {
    width: "auto",
    textAlign: "center",
    marginLeft: "20px",
    marginRight: "20px",
    marginTop: "-40px",
    padding: "20px 0",
    marginBottom: "15px",
  },
  socialIcons: {
    maxWidth: "24px",
    marginTop: "0",
    width: "100%",
    transform: "none",
    left: "0",
    top: "0",
    height: "100%",
    lineHeight: "41px",
    fontSize: "20px"
  },
  divider: {
    marginTop: "30px",
    marginBottom: "0px",
    textAlign: "center"
  },
  cardFooter: {
    paddingTop: "0rem",
    border: "0",
    borderRadius: "6px",
    justifyContent: "center !important"
  },
  socialLine: {
    marginTop: "1rem",
    textAlign: "center",
    padding: "0",
  },
  inputIconsColor: {
    color: "#495057",
  }
};

export default signupPageStyle;

标签: reactjsreact-redux

解决方案


像 import { withStyles } from '@material-ui/core/styles' 一样导入;


推荐阅读