Material-ui: @ material-ui / styles：是否在类组件中使用？

创建于 2019-05-24 · 17评论 · 资料来源: mui-org/material-ui

如何在类组件中使用makeStyles API？该文档仅显示功能组件的示例。

当我尝试在类组件的render方法中使用此方法时，出现以下错误：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

docs question

资料来源

joncursi

👍3

最有用的评论

我用withStyles代替makeStyle这样的...

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = (theme) => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
});

class LoginComponent extends React?Component {
  render() {
    const { classes } = this.props;
    /** your UI components... */
  }
}

export default withStyles(syles)(LoginComponent);

essare 于 2019-11-24

👍55 🎉13 ❤11 🚀4

所有17条评论

您不能在类组件内部使用钩子。您需要功能组件或使用更高的顺序（ withStyles ）。

oliviertassinari 于 2019-05-24

👎36 😕13 👍5 🎉1 😄1

我要结束了，如果我们看到类似的报告，我认为我们应该记录下来。

oliviertassinari 于 2019-05-24

@oliviertassinari ：但是如果将app声明为类，该怎么办？
因为在应用程序中，我具有状态和其他功能。

Angelk90 于 2019-07-01

@ Angelk90您应该使用高阶组件API： https : withStyles ）。

oliviertassinari 于 2019-07-01

根据您的文档， withStyles api用法用法示例仍然是一个功能组件。

https://material-ui.com/styles/basics/

这就是为什么我拒绝您的回答。

medmin 于 2019-07-28

😕4

@oliviertassinari
如何在HOC中使用makeStyles？
根据我的用例，我需要样式的材质主题对象。

ghosh-jaideep 于 2019-09-17

👍5

如@ ghosh-jaideep所建议，
如何使用主题实用程序，例如：

[theme.breakpoints.up("md")]: {
          paddingLeft: theme.spacing(2),
          paddingTop: theme.spacing(2)
}

在类组件内部？
谢谢

AndreaLombardo 于 2019-11-15

我用withStyles代替makeStyle这样的...

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = (theme) => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
});

class LoginComponent extends React?Component {
  render() {
    const { classes } = this.props;
    /** your UI components... */
  }
}

export default withStyles(syles)(LoginComponent);

essare 于 2019-11-24

👍55 🎉13 ❤11 🚀4

@ Ess-Soft如何从父组件渲染LoginComponent ？

您是否通过主题作为道具？
您是否在父组件中使用了ThemeProvider ？

如果您共享父组件的代码段，它将更加有用。

ppm-manish 于 2019-11-26

👀2

我做了与@ Ess-Soft相同的操作，并在withStyles之前添加了widthTheme
withTheme(withStyles(useStyles)(LoginComponent ))

那么即使在render内部也可以使用theme render

dmcshehan 于 2019-12-20

👍1

有人可以解释带样式的东西。我可以诚实地说，当我看到类似这样的内容时，我认为大声笑出来的人是Angular，这是如此的正常。今天3个小时搜索并寻找答案，然后我找到了。

xtianus79 于 2020-06-29

👍1

@ xtianus79此API也可用于类组件： https : //material-ui.com/styles/basics/#higher -order -component-api。

oliviertassinari 于 2020-06-29

@oliviertassinari您可以使用网格显示它的示例吗？大声笑，这就是我想要做的，我被困在那里。我正在使用makeStyles和createStyles，我无法弄清楚没有功能怎么办？你能帮忙吗

xtianus79 于 2020-06-29

@ xtianus79您将在StackOverflow上找到更多帮助

oliviertassinari 于 2020-06-29

对于该特定问题和用例，我没有看到@oliviertassinari 。

xtianus79 于 2020-06-30

嗯甚至https://material-ui.com/styles/basics/#higher -order-component-api都没有回答如何使用“主题”？为什么仅使用Hooks支持功能组件？人们确实有遗留代码或需要基于类的组件。

DewangS 于 2020-07-23

@DewangS请参阅withTheme() API： https : //material-ui.com/styles/api/#withtheme -component -component。

oliviertassinari 于 2020-07-23

此页面是否有帮助？

0 / 5 - 0 等级

Material-ui: @ material-ui / styles：是否在类组件中使用？

最有用的评论

所有17条评论

相关问题