标签: material-ui

我是 React 的新手，现在我想在表中显示一些记录，现在我收到了这个错误。请帮帮我。

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本有关如何调试和解决此问题的提示，请参阅相同的应用程序。

import React,{Component} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
    root: {
      width: '100%',
      marginTop: theme.spacing(3),
      overflowX: 'auto',
    },
    table: {
      minWidth: 650,
    },
  }));

class allowance extends Component{
    constructor(){
        super();
        this.state={ …

我写了一些代码:

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

我收到一个错误:

JSX元素类型Elem没有任何构造或调用签名

这是什么意思？

I have a simple ReactJS app based on hooks (no classes) using StrictMode.

I am using React version 16.13.1 and Material-UI version 4.9.10.

In the Appbar I am using Drawer.

    <div className={classes.root}>
        <AppBar position="static">
            <Toolbar>
                <IconButton
                    edge="start"
                    className={classes.menuButton}
                    color="inherit"
                    aria-label="menu"
                    onClick={handleDrawerOpen}>
                    <MenuIcon />
                </IconButton>
                <Typography variant="h6" className={classes.title}>
                    Online Information
                </Typography>
            </Toolbar>
        </AppBar>
        <Drawer
            variant="persistent"
            anchor="left"
            open={open}
        ></Drawer>
    </div>

I notice that when I open the Drawer, I get the following warning.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed …

我正在玩Material-UI.是否有任何创建网格布局的选项(如在Bootstrap中)？

如果没有,添加此功能的方法是什么？

有一个GridList组件,但我想它有一些不同的目的.

当我尝试运行此代码时，它给出了此错误：

\n

\xc3\x97 TypeError：无法读取未定义的属性（读取“map”）

\n

为什么会发生这种情况？我怎样才能让它发挥作用？

import React from \'react\';\nimport Grid from \'@material-ui/core/Grid\';\n\nimport Product from \'./Product/Product\';\nimport useStyles from \'./styles\';\n\nconst products = [\n  {id: 1, name: \'Shoes\', description: \'Running Shoes.\' },\n  {id: 2, name: \'MacBook\', description: \'Apple MacBook.\' },\n];\n\nconst Products = ({ products }) => {\n  const classes = useStyles();\n\n  return (\n    <main className={classes.content}>\n      <div className={classes.toolbar} />\n      <Grid container justify="center" spacing={4}>\n        {products.map((products) => (\n          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>\n            <Product />\n          </Grid>\n        ))};\n      </Grid>\n    </main>\n …

我试图用我的 React 18.0 项目安装 Material UI 和图标，但我不能。该项目是使用最新的create-react-app创建的 npm install @material-ui/core @material-ui/icons

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: client@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.3
npm ERR! node_modules/@material-ui/core
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.2
npm ERR!   node_modules/@material-ui/icons
npm ERR!     @material-ui/icons@"*" from the root project
npm …

出于某种原因，我无法让material-ui日期选择器工作。每次在 React 中呈现日期选择器时，都会抛出以下错误：

RangeError：格式字符串包含未转义的拉丁字母字符 n

我只使用日期选择器（https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js）创建了一个stackblitz，即使在那里错误也会出现。我究竟做错了什么？我想我遵循了安装指南中的所有说明。

链接到 material-ui/pickers：https : //material-ui-pickers.dev/

在 Flutter 版本 3.0.1 中使用 Material3 useMaterial3: true，当滚动（比如列表视图）时，应用栏会变为较暗的颜色...可以禁用此功能吗？

来自本机 android Material3 MaterialToolbar 的示例禁用滚动着色：

我正在尝试创建一个Autocomplete实质上仅向用户显示搜索结果的 Material UI 组件。某些选项的名称可能会重复，但它们都有唯一的 ID。我收到以下警告：

\n

index.js:1 警告：遇到两个具有相同键的子项，Name B。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项重复和/或省略 \xe2\x80\x94 该行为不受支持，并且可能在未来版本中更改。

\n

const SearchField = () => {\n    const [open, setOpen] = React.useState(false)\n    const [searchQuery, setSearchQuery] = React.useState('')\n    const [searchResults, setSearchResults] = React.useState([])\n    const loading = true //later\n\n    const debounced = useDebouncedCallback(\n        async searchQuery => {\n            if (searchQuery) {\n                let result = await doSearch(searchQuery)\n                if (result.status === 200) {\n                    setSearchResults(result.data)\n                } else {\n                    console.error(result)\n                }\n            }\n        },\n        1000\n    )\n\n    const handleInputChange = e => …

尽我所能，我无法理解这里给出的描述：https : //material-ui.com/components/box/

“Box 组件充当大多数 CSS 实用程序需求的包装器组件。” 什么是 CSS 实用程序需求？

这个组件的用例是什么？它解决什么问题？你如何使用它？

我发现 material-ui 文档非常有限且难以理解。我用谷歌搜索过，但通常只找到了关于如何使用 Material UI 的相当轻量级的博客文章。除了帮助理解这个组件之外，我真的很感激任何好的资源（比如他们自己文档的更好版本，如果存在的话）。

（背景，我大体了解React、JS、CSS、HTML等，后两者实力较弱）。

谢谢你。