Questions tagged «material-ui»

我写了一些代码： function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; } 我收到一个错误： JSX元素类型Elem没有任何构造或调用签名 这是什么意思？

156 reactjs  typescript  material-ui 

我正在与Material-UI一起玩。是否有创建网格布局的任何选项（例如在Bootstrap中）？ 如果不是，添加此功能的方式是什么？ 有一个GridList组件，但我想它有一些不同的用途。

118 reactjs  material-design  material-ui  grid-system 

每当我尝试使用makeStyles()具有生命周期方法的组件时，都会出现以下错误： 无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生： 您可能使用了不匹配的React和渲染器版本（例如React DOM） 您可能正在违反钩子规则 您可能在同一应用中拥有多个React副本 下面是产生此错误的代码的一个小示例。其他示例也将类分配给子项。我在MUI的文档中找不到任何显示其他使用方式makeStyles并可以使用生命周期方法的功能。 import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; import { Container, makeStyles } from '@material-ui/core'; import LogoButtonCard from '../molecules/Cards/LogoButtonCard'; const useStyles = makeStyles(theme => ({ root: { display: 'flex', alignItems: 'center', justifyContent: 'center', }, })); const classes = …

116 reactjs  material-ui 

使用css-in-js方法将类添加到React组件，如何添加多个组件？ 这是class变量： const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); 这是我的用法： return ( <div className={ this.props.classes.container }> 上面的作品，但有没有办法添加两个类，而无需使用classNamesnpm包？就像是： <div className={ this.props.classes.container + this.props.classes.spacious}>

92 css  reactjs  material-design  material-ui  jss 

我不太了解React Material-UI网格系统。如果我想使用表单组件进行登录，最简单的方法是在所有设备（移动设备和台式机）的屏幕上居中显示它？

77 reactjs  mobile  login  material-ui  desktop 

该文档上的属性列表不包含onClick （http://www.material-ui.com/#/components/icon-button） 我怎么知道我需要使用onClick作为点击处理程序？

76 reactjs  material-ui 

我创建表单，我包括几个TextField，DropDownMenu材质UI组件，问题是如何从一个obj中的所有TextField，DropDownMenus收集所有数据并将其发送到服务器。对于TextField，它具有TextField.getValue（）返回输入的值。但是我不知道如何使用它。 var React = require('react'), mui = require('material-ui'), Paper = mui.Paper, Toolbar = mui.Toolbar, ToolbarGroup = mui.ToolbarGroup, DropDownMenu = mui.DropDownMenu, TextField = mui.TextField, FlatButton = mui.FlatButton, Snackbar = mui.Snackbar; var menuItemsIwant = [ { payload: '1', text: '[Select a finacial purpose]' }, { payload: '2', text: 'Every Night' }, { …

71 javascript  reactjs  material-design  material-ui 

由于某种原因，我无法使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/

19 javascript  reactjs  material-ui  material-ui-pickers 

我指的是React Material-UI的文档（https://material-ui.com/components/autocomplete/）。 在演示代码中， <Autocomplete options={top100Films} getOptionLabel={(option: FilmOptionType) => option.title} style={{ width: 300 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" fullWidth /> )} /> 我知道它是如何工作的，但是我不确定应该如何获得选定的值。 例如，我想onChange对此使用道具，以便我可以根据选择进行一些操作。 我尝试添加 onChange={v => console.log(v)} 但v不会显示与所选值相关的任何内容。

17 javascript  reactjs  material-ui 

当尝试在生产版本上访问我的MERN应用程序的Login组件时，此图像中显示了一系列以下类型错误： 我的应用程序（https://github.com/ahaq0/kumon_schedule）在本地运行良好，并且在今天早些时候在Heroku上托管的运行良好。 我尝试回滚我今天所做的代码中的所有更改，但均无济于事。同样，我检查了package.json（和.lock）以查看是否更改了材料UI依赖关系，但这是相同的。我似乎无法弄清楚为什么它突然在这里的托管版本上停止工作。 错误行的代码如下。但是，我没有编写内容，因为它是用户界面的一部分。 if (sheetManager.dynamicStyles) { var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({ link: true }, options)); dynamicSheet.update(props).attach(); state.dynamicSheet = dynamicSheet; state.classes = mergeClasses({ baseClasses: sheetManager.staticSheet.classes, newClasses: dynamicSheet.classes }); if (sheetsRegistry) { sheetsRegistry.add(dynamicSheet); } } else { state.classes = sheetManager.staticSheet.classes; } sheetManager.refs += 1; 这是我第一个部署的应用程序，尽管我尽了最大的努力来回退，但我却迷失了从工作到不工作的所有过程。 编辑。我应该提到我在错误日志来自的Firefox和Chrome中进行了测试。 编辑＃2。经过更多的调试后，我发现如果我回滚以通过Heroku提交fccc55a5，则错误消失了。但是，如果我使用该提交创建了一个新分支并尝试部署该分支，它将无法正常工作。 请在这里查看 https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5 当我恢复到Heroku中的最后一个版本时，它将起作用。但是，如果我将先前的提交合并到新分支中并尝试部署它，则不会。

15 reactjs  typescript  heroku  material-ui  mern 

我想使用Autocompletecomponent作为输入标签。我正在尝试获取标签并将它们保存在一个状态，以便以后可以将它们保存在数据库中。我在反应中使用函数而不是类。我确实尝试过onChange，但没有得到任何结果。 <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions getOptionLabel={option => option.tags} renderInput={params => (<TextField className={classes.input} {...params} variant="outlined" placeholder="Favorites" margin="normal" fullWidth />)} />

12 reactjs  material-ui 

我已经安装material-ui / lab以便使用警报组件，但是每当我使用以下命令导入它时：import Alert from '@material-ui/lab/Alert';它无法编译并引发此错误： ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. 因此，我尝试通过Google搜索此问题，发现了另一个有关该material-ui/lab/AutoComplete组件的问题（确切地说是这个问题），并且可接受的答案是将material-ui / core更新为4.9.9版，对于要求该功能的人来说，它似乎很有效，但可惜不是我，我拥有所有已安装material-ui的这个版本： "@material-ui/core": "^4.9.9", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.48", 所以现在我问你们是否还有另一种方法可以解决这个问题，谢谢

11 javascript  node.js  reactjs  material-ui 

在浏览器上运行项目时出现以下错误： 编译失败： ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. 我正在尝试实现自动完成组件（从“多个值”部分的示例中）。 这是我正在使用的代码： import React from 'react'; import Chip from '@material-ui/core/Chip'; import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField'; <Autocomplete multiple id="tags-standard" options={top100Films} getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} renderInput={(params) => ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" /> )} /> …

11 reactjs  typescript  material-ui