Question

当尝试使用theme.breakpoints.between时，无法读取'between'/'up'..的属性。

我在这里已经阅读了其他stackoverflow答案和一些问题：https://github.com/mui-org/material-ui/issues，唯一的解决方案似乎是使用ThemeProvider或MuiThemeProvider，尽管我尝试过，但是错误仍然存在。

组件文件：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/styles";
import Grid from "@material-ui/core/Grid";

import Logo from "../assets/logo/logo";

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  logo: {
    [theme.breakpoints.up("md")]: {
      padding: "5em"
    }
  }
});

class Tools extends Component {
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <Grid container className={classes.logo}>
          <Grid item className={classes.logo}>
            <Logo name="some-logo" />
          </Grid>
        </Grid>
      </div>
    );
  }
}

Tools.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Tools);

App.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <Router>
          <div className="App">
             <Switch>
               <Route exact path="/" render={() => <Home />} />
             </Switch>
          </div>
        </Router>
      </MuiThemeProvider>
    );
  }
}

export default App;

Answer 1

我认为withStyles应该是从"@material-ui/**core**/styles"导入到组件文件中的。

尝试使用theme.breakpoints时，React的材料UI“无法读取'介于...之间的属性。

1 个答案: