React中withStyles不是函数的TypeError报错求助

Looks like your TypeError stems from two import-related mistakes in your code, plus a minor naming mix-up in your style file. Let's break this down and fix it step by step:

1. Fix the withStyles import #

In Material-UI 1.0.0-beta.45, the withStyles function is exported as the default export from material-ui/styles/withStyles, not a named export. Your current code uses curly braces for a named import, which means you're grabbing an object (not the actual function) — that's why your console shows withStyles as an object instead of a callable function.

Update your import to:

import withStyles from "material-ui/styles/withStyles";

2. Fix the style object import #

Your style file exports signupPageStyle as a default export, but you're trying to import it as a named loginPageStyle with curly braces. This means loginPageStyle is actually undefined right now, which will throw errors when passed to withStyles.

Change your style import to use default import syntax:

import loginPageStyle from "../assets/jss/material-kit-react/views/loginPage.jsx";

Bonus: Clean up style variable naming (optional but recommended) #

To avoid confusion, rename the variable in your style file to match its intended usage:

import { container } from "../../material-kit-react.jsx";
// Rename from signupPageStyle to loginPageStyle
const loginPageStyle = {
  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 loginPageStyle;

3. Verify your LoginPage component #

Double-check that LoginPage is a valid React component (either a function or class component) with no syntax errors. For example:

// Example LoginPage component
const LoginPage = ({ classes }) => {
  return (
    <div className={classes.container}>
      {/* Your login form content here */}
    </div>
  );
};

Final Corrected Code #

Putting it all together, your component file should look like this:

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

const LoginPage = ({ classes }) => {
  return (
    <div className={classes.pageHeader}>
      {/* Your login UI elements go here */}
    </div>
  );
};

export default withStyles(loginPageStyle)(LoginPage);

If you're still stuck, confirm your Material-UI version with npm list material-ui to ensure you're on 1.0.0-beta.45, and double-check for typos in your component or style definitions.

内容的提问来源于stack exchange，提问作者Nega developer