Material UI RaisedButton引发‘元素类型无效’错误求助

Hey, that error you're seeing is super common when working with Material UI—usually it means the RaisedButton component you're trying to use either doesn't exist in your version of MUI, or you're importing it wrong. Let's break down the fixes based on which version of Material UI you're using:

If you're on Material UI v1.0 or newer #

Starting with MUI v1, they got rid of RaisedButton entirely. It's been replaced by the Button component, which uses the variant="contained" prop to get that classic raised button look. Here's how to update your code:

1. First, fix the import line:

// Replace your old import with this
import Button from '@material-ui/core/Button';

2. Then swap out the RaisedButton component in your form:

// Replace the <RaisedButton> tag with this
<Button 
  variant="contained" 
  color="primary" 
  type="submit" 
  className={classes.submit}
>
  Save
</Button>

Note: Unlike the old RaisedButton, the new Button doesn't use a label prop—you just put the button text directly inside the component tags.

If you're using the older Material UI v0.x (like v0.20.x) #

If your project is stuck on the older version of MUI, the problem is that you're trying to destructure RaisedButton from the main material-ui import, which doesn't work for v0.x. You need to import it directly from its own file:

Update your import to this:

// Replace your destructured import with this
import RaisedButton from 'material-ui/RaisedButton';

Quick way to check your MUI version #

To confirm which version you're running, pop open your terminal in the project root and run:

npm list material-ui
# Or if you use yarn:
yarn list material-ui

You can also check your package.json file under the dependencies section to see the exact version number.

Once you make the right change for your version, that error should go away and your button should render properly!

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