刚接触react,引入了material-ui一直报错,请前辈们指点一下

发布于 2022-09-07 08:30:52 字数 1386 浏览 23 评论 0

App.js 引入了 一个子组件 SnackbarExampleSimple

import React from 'react';
import ReactDOM from 'react-dom';
import SnackbarExampleSimple from './Header'


  const App = () => (

    <div>
       {/* <Header/> */}
       <SnackbarExampleSimple/>
    </div>
   );
export default App;

Header.js,里面代码基本上是复制的官网实例

import React from 'react';
// import ReactDOM from 'react-dom';
// import './css/header.css';

import Snackbar from 'material-ui/Snackbar';
import RaisedButton from 'material-ui/RaisedButton';

export default class SnackbarExampleSimple extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }

  handleClick = () => {
    this.setState({
      open: true,
    });
  };

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

  render() {
    return (
      <div>
        <RaisedButton
          onClick={this.handleClick}
          label="Add to my calendar"
        />
        <Snackbar
          open={this.state.open}
          message="Event added to your calendar"
          autoHideDuration={4000}
          onRequestClose={this.handleRequestClose}
        />
      </div>
    );
  }
}

报错一堆
图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

庆幸我还是我 2022-09-14 08:30:52

我也再用这个,这个是你没有引入css,
正确的引入方法

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; //就是它
import Toggle from 'material-ui/Toggle';

<MuiThemeProvider>
    <Toggle
        defaultToggled={mycheck}
        style={styles.toggle}
        trackSwitchedStyle={{backgroundColor:"#4A8EF2"}}
        thumbStyle={styles.thumbStyle}
        thumbSwitchedStyle={styles.thumbStyle}
        onToggle={this.switchState}
        />
</MuiThemeProvider>
惯饮孤独 2022-09-14 08:30:52

material-ui是不是在初始化要设置一下样式呢。

明媚如初 2022-09-14 08:30:52

答案在评论里

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文