Javascript 在类组件中使用材质UI

我试图在类组件中使用MaterialUI，而不是将所有内容转换为挂钩。 我不确定哪种方法更简单，钩子或复古适合我所拥有的

这是我的密码：

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;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
点击次数：[]，
描述：[]，
};
}
componentDidMount（）{
这是fetchData（）；
}
fetchData（）{
取回(
`https://api.openweathermap.org/data/2.5/onecall?lat=30.2672&lon=-97.7431&units=imperial&exclude=minutely&appid=${process.env.REACT\u APP\u WEATHER\u KEY}`
)
.然后（（json）=>json.json（）
。然后（（数据）=>{
这是我的国家({
点击：data.current，
desc:data.current.weather[0]，
});
控制台日志（数据）；
})
.catch（（错误）=>console.log（“解析失败”，错误））；
}
render（）{
const useStyles=makeStyles({
根目录：{
最大宽度：450，
边距：“0自动”，
},
MuiCardContent：{
填充：0，
“&：最后一个孩子”：{
填充底部：2，
},
},
标题：{
尺寸：14，
},
});
const unixTimestamp=this.state.hits.sunset*1000；
const date=新日期（unixTimestamp）；
const localized=date.toLocaleString（）；
const classes=useStyles（）；
返回(
当前天气
{this.state.desc.main}
Temp:{this.state.hits.Temp}F
感觉像：{this.state.hits.Feels\u Like}F
湿度：{this.state.hits.湿度}%
日落：{本地化}
UV索引：{this.state.hits.uvi}（高于8时要小心）
);
}
}
导出默认应用程序；

---

我看了材料ui文档，但我对如何在类组件内部实现这一点感到困惑。我不熟悉hooks，所以现在这似乎有点疯狂。

在您的例子中，如果您想设计类组件的样式，应该使用with样式

试试这个：

import React，{Component}来自'React'；
从“@material ui/core/styles”导入{withStyles}”；
const useStyles=（主题）=>({
根目录：{
paddingTop：主题。间距（8），
背景颜色：“白色”
},
})
类应用程序扩展组件{
render（）{
const{classes}=this.props
返回(
...
);
}
}
导出默认样式（useStyles）（应用程序）在您的例子中，如果您想设置类组件的样式，应该使用with-styles

试试这个：


import React，{Component}来自'React'；
从“@material ui/core/styles”导入{withStyles}”；
const useStyles=（主题）=>({
根目录：{
paddingTop：主题。间距（8），
背景颜色：“白色”
},
})
类应用程序扩展组件{
render（）{
const{classes}=this.props
返回(
...
);
}
}
导出默认样式（useStyles）（应用程序）
makeStyles
返回一个仅对功能组件有效的钩子。您已经正确地找到了
with styles
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

。。。
从“@material ui/core/styles”导入{withStyles}；//json.json（））
。然后（（数据）=>{
这是我的国家({
点击：data.current，
desc:data.current.weather[0]，
});
控制台日志（数据）；
})
.catch（（错误）=>console.log（“解析失败”，错误））；
}
render（）{
const unixTimestamp=this.state.hits.sunset*1000；
const date=新日期（unixTimestamp）；
const localized=date.toLocaleString（）；
const{classes}=this.props；//
makeStyles
返回一个只对函数性组件有效的钩子。您已经正确地找到了
with styles
HOC，但您只需要使用它。分解并从外部定义样式对象，然后传递到
with styles（）
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

。。。
从“@material ui/core/styles”；//json.json（）导入{withStyles}
。然后（（数据）=>{
这是我的国家({
点击：data.current，
desc:data.current.weather[0]，
});
控制台日志（数据）；
})
.catch（（错误）=>console.log（“解析失败”，错误））；
}
render（）{
const unixTimestamp=this.state.hits.sunset*1000；
const date=新日期（unixTimestamp）；
const localized=date.toLocaleString（）；
const{classes}=this.props；//谢谢你的帮助！我不知道该放在哪里。谢谢你的帮助！我不知道该放在哪里。