Material-UI React Modal问题：<div>标签的className属性值无效

Hey there, let’s sort out that pesky className issue you’re facing! The root problem here is that makeStyles is a React Hook designed exclusively for functional components—it won’t work correctly in class components. When you try to use it directly like you did, you’re not actually getting a valid CSS class name back, which is why your styles aren’t applying (or you’re seeing errors).

Why Your Current Code Isn’t Working #

• In your first attempt, paperStyle is the hook function returned by makeStyles, not the class name you need. Calling it directly in a class component breaks React’s Hook rules (since Hooks can only be called at the top level of functional components).
• Your second attempt rearranged the styles object, but you’re still using makeStyles—so you’re still dealing with a hook that can’t be properly used in a class component.

The Correct Approach: Use withStyles for Class Components #

Material-UI provides withStyles, a higher-order component (HOC) specifically built for styling class components. Here’s how to refactor your code to make it work:

Step 1: Import the Right Utilities

First, make sure you’re importing the necessary tools:

import React from 'react';
import { withStyles, createStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
// Import your ItemsTable component here

Step 2: Define Your Styles

Create a styles function that accepts the theme (if you need access to Material-UI’s theme values):

const styles = theme => createStyles({
  modal: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
});

Step 3: Build Your Class Component

Use the injected classes prop (provided by withStyles) to access your style class names:

class YourModalComponent extends React.Component {
  state = {
    open: false,
    clickedEBELN: ''
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    const { classes } = this.props; // Pull the injected styles from props

    return (
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={this.state.open}
        onClose={this.handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{ timeout: 500 }}
      >
        <Fade in={this.state.open}>
          <div className={classes.paper}>
            <ItemsTable EBELN_={this.state.clickedEBELN} />
          </div>
        </Fade>
      </Modal>
    );
  }
}

// Wrap your component with withStyles to inject the styles
export default withStyles(styles)(YourModalComponent);

How This Works #

withStyles takes your style definition, converts it into valid CSS class names, and passes them to your component via the classes prop. This is the official Material-UI way to style class components, and it plays nicely with the rest of your class-based code.

Quick Note #

If you ever switch to functional components later, you can go back to using makeStyles—but for now, withStyles is the right tool for your class component setup.

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