在 Class 组件中使用 Material-UI HOC

Question

我正在尝试在我的 class 组件中使用 material UI，而不是将所有内容都转换为 Hook。我不确定哪种方法更简单，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 returns 一个 hook 仅对 functional 组件有效。您已经正确地找到了 withStyles HOC，但您只需要使用它。分解并在外部定义您的样式对象，然后传递给 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

在 Class 组件中使用 Material-UI HOC

Use Material-UI HOC in Class Component

javascript

higher-order-functions

reactjs

material-ui