Question

我正在使用React Material-UI设计我的界面...在我的主布局中使用此特定组件时会出现错误。任何人都可以帮助我找出解决方案的方法，请在此处输入代码

  [287] ./src/components/RadioCustom.js 5.42 kB {0} [built] [2 errors]
     + 292 hidden modules

ERROR in ./src/components/RadioCustom.js
Module not found: Error: Cannot resolve module '@material-ui/icons/RadioButtonUnchecked' in c:\Users\Muhammed Suhail\Desktop\redux\ReduxSimpleStarter-master\src\components
 @ ./src/components/RadioCustom.js 27:28-78

ERROR in ./src/components/RadioCustom.js
Module not found: Error: Cannot resolve module '@material-ui/icons/RadioButtonChecked' in c:\Users\Muhammed Suhail\Desktop\redux\ReduxSimpleStarter-master\src\components
 @ ./src/components/RadioCustom.js 31:26-74

这是我从Material-UI网站上获取的这段代码，是我的RadioCustom.js。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import Radio from '@material-ui/core/Radio';
import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';

const styles = {
  root: {
    color: green[600],
    '&$checked': {
      color: green[500],
    },
  },
  checked: {},
  size: {
    width: 40,
    height: 40,
  },
  sizeIcon: {
    fontSize: 20,
  },
};

class RadioButtons extends React.Component {
  state = {
    selectedValue: 'a',
  };

  handleChange = event => {
    this.setState({ selectedValue: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Radio
          checked={this.state.selectedValue === 'a'}
          onChange={this.handleChange}
          value="a"
          name="radio-button-demo"
          aria-label="A"
        />
        <Radio
          checked={this.state.selectedValue === 'b'}
          onChange={this.handleChange}
          value="b"
          name="radio-button-demo"
          aria-label="B"
        />
        <Radio
          checked={this.state.selectedValue === 'c'}
          onChange={this.handleChange}
          value="c"
          name="radio-button-demo"
          aria-label="C"
          classes={{
            root: classes.root,
            checked: classes.checked,
          }}
        />
        <Radio
          checked={this.state.selectedValue === 'd'}
          onChange={this.handleChange}
          value="d"
          color="default"
          name="radio-button-demo"
          aria-label="D"
        />
        <Radio
          checked={this.state.selectedValue === 'e'}
          onChange={this.handleChange}
          value="e"
          color="default"
          name="radio-button-demo"
          aria-label="E"
          className={classes.size}
          icon={<RadioButtonUncheckedIcon className={classes.sizeIcon} />}
          checkedIcon={<RadioButtonCheckedIcon className={classes.sizeIcon} />}
        />
      </div>
    );
  }
}

RadioButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RadioButtons);

任何人都请帮助找出解决方案..因为我是新来的反应..

Answer 1

您可能忘了安装依赖项：npm install @material-ui/icons --save应该可以解决问题

https://material-ui.com/getting-started/installation/#svg-icons

找不到模块：错误：无法在React Material-UI中解析模块

1 个答案: