在 Class 组件中使用 Material-UI HOC

Question

我正在尝试在我的 class 组件中使用材质 UI，而不是将所有内容都转换为 Hooks。 我不确定哪种方法更容易，Hooks 或改装我所拥有的。

https://material-ui.com/styles/basics/#higher-order-component-api

这是我的代码：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hits: [],
      desc: [],
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(
      `https://api.openweathermap.org/data/2.5/onecall?lat=30.2672&lon=-97.7431&units=imperial&exclude=minutely&appid=${process.env.REACT_APP_WEATHER_KEY}`
    )
      .then((json) => json.json())
      .then((data) => {
        this.setState({
          hits: data.current,
          desc: data.current.weather[0],
        });
        console.log(data);
      })

      .catch((error) => console.log("parsing failed", error));
  }

  render() {
    const useStyles = makeStyles({
      root: {
        maxWidth: 450,
        margin: "0 auto",
      },
      MuiCardContent: {
        padding: 0,
        "&:last-child": {
          paddingBottom: 2,
        },
      },
      title: {
        fontSize: 14,
      },
    });

    const unixTimestamp = this.state.hits.sunset * 1000;
    const date = new Date(unixTimestamp);

    const localized = date.toLocaleString();

    const classes = useStyles();
    return (
      <Card className={classes.root} variant="outlined">
        <CardContent className={classes.MuiCardContent}>
          <Typography
            className={classes.title}
            color="textSecondary"
            gutterBottom
          >
            Current Weather
          </Typography>
          <Typography variant="subtitle1" component="h2">
            <div>{this.state.desc.main}</div>
            <div>Temp: {this.state.hits.temp} F</div>
            <div>Feels Like: {this.state.hits.feels_like} F</div>
            <div>Humidity: {this.state.hits.humidity}%</div>
            <div>Sunset: {localized}</div>
            <div>UV Index: {this.state.hits.uvi} (Take caution when above 8)</div>
 </Typography>
        </CardContent>
      </Card>
    );
  }
}

export default App;

我查看了 material-ui 文档，但我对如何在 class 组件内部实现这一点感到困惑。 我是钩子的新手，所以现在看起来有点疯狂。

Answer 1

在您的情况下，如果您想设置 class 组件的样式，您应该使用 withStyles。

尝试这个：

 import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; const useStyles = (theme) => ({ root: { paddingTop: theme.spacing(8), backgroundColor: "white" }, }) class App extends Component { render() { const { classes } = this.props return( <div className = {classes.root}>... </div> ); } } export default withStyles(useStyles)(App);

Answer 2

makeStyles返回一个只对功能组件有效的钩子。 您已经正确地找到了withStyles HOC，但您只需要使用它。 分解并在外部定义您的样式 object，并传递给withStyles() HOC。

...
import { withStyles } from '@material-ui/core/styles'; // <-- import withStyles HOC
...

const styles = {
  root: {
    maxWidth: 450,
    margin: "0 auto",
  },
  MuiCardContent: {
    padding: 0,
    "&:last-child": {
      paddingBottom: 2,
    },
  },
  title: {
    fontSize: 14,
  },
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hits: [],
      desc: [],
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(
      `https://api.openweathermap.org/data/2.5/onecall?lat=30.2672&lon=-97.7431&units=imperial&exclude=minutely&appid=${process.env.REACT_APP_WEATHER_KEY}`
    )
      .then((json) => json.json())
      .then((data) => {
        this.setState({
          hits: data.current,
          desc: data.current.weather[0],
        });
        console.log(data);
      })

      .catch((error) => console.log("parsing failed", error));
  }

  render() {
    const unixTimestamp = this.state.hits.sunset * 1000;
    const date = new Date(unixTimestamp);
    const localized = date.toLocaleString();

    const { classes } = this.props; // <-- destructure injected classes prop

    return (
      <Card className={classes.root} variant="outlined">
        <CardContent className={classes.MuiCardContent}>
          <Typography
            className={classes.title}
            color="textSecondary"
            gutterBottom
          >
            Current Weather
          </Typography>
          <Typography variant="subtitle1" component="h2">
            <div>{this.state.desc.main}</div>
            <div>Temp: {this.state.hits.temp} F</div>
            <div>Feels Like: {this.state.hits.feels_like} F</div>
            <div>Humidity: {this.state.hits.humidity}%</div>
            <div>Sunset: {localized}</div>
            <div>UV Index: {this.state.hits.uvi} (Take caution when above 8)</div>
 </Typography>
        </CardContent>
      </Card>
    );
  }
}

export default withStyles(styles)(App); // <-- decorate App with classes prop