material-ui 相关问题

我有一个按以下方式定义的多行 TextField：我有一个按以下方式定义的多行 TextField： <TextField id="outlined-multiline-flexible" label="Description" multiline rows={10} value={description} onChange={handleChangeDescription} /> 这是handleChangeDescription： function handleChangeDescription(event: { target: { value: SetStateAction<string> } }) { setDescription(event.target.value) } 我知道它基本上是正确的，因为我几乎直接从 MaterialUI 文档中获取它，但我不断收到相同的错误：“Material UI：重新渲染次数过多。布局不稳定。TextareaAutosize 限制渲染数量以防止无限循环”。奇怪的是，这只发生在我渲染页面，然后从页面上单击，然后单击返回页面时。该错误不会出现在初始渲染中。我真的不知道我能做些什么来解决它。我已经尝试了this线程中的所有内容，但没有任何帮助，所以我真的很感激任何其他建议！！我自己也遇到了这个问题，为可能遇到同样问题的其他人发帖。问题在于 React 的 TextAreaAutoSize 组件如何管理其状态。要解决这个问题，您可以将 fullWidth 属性传递给 textField。

reactjs material-ui

回答 1 投票 0

将 MUI 从 5.14.20 升级到 5.15.13 后出现 TypeError: __vite_ssr_import_3__.default

将 MUI 从 5.14.20 升级到 5.15.13 时，当通过 npm run dev 运行时，我收到指向特定 MUI 文件的 vite 的类型错误。堆栈跟踪：类型错误：__vite_ssr_import_3__。默认为 n...

material-ui vite astrojs

回答 1 投票 0

风格 mui 自动完成

我继承了一个带有material ui的项目，以前从未使用过。我的代码中有以下内容我继承了一个带有material ui的项目，我以前从未使用过它。我的代码中有以下内容 <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > {label} </InputLabel> <Input className={className} id={id} value={value} onChange={(e) => { onChange(e.target.value) }} /> </FormControl> 这在任何地方都有效，标签缩小并且样式应用正确。当我检查代码时，我看到下划线的样式使用 :before 和 :after 伪类我需要将相同的内容应用于自动完成，即使用谷歌地点来自动完成位置。如果这很重要的话，我正在使用的库是react-google-autocomplete 我已经尝试过（在一万亿种其他事情中） const {ref} = usePlacesWidget({ apiKey: process.env.REACT_APP_API_KEY, onPlaceSelected: (place) => { console.log(place); }, }); return ( <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > {label} </InputLabel> <Autocomplete ref={ref} id={id} className={className} placeholder="" renderInput={(params) => ( <Input {...params} InputProps={{ ...params.InputProps, className: {className} }} /> )} /> </FormControl> ); 标签有样式但不收缩。我什至尝试添加 InputLabelProps={{ shrink: true, ...props.InputLabelProps, }} 无济于事。文本字段应用了大小及其文本内容（字体）的样式 - 没有伪类，并且使用默认的轮廓样式进行概述。我想知道如何使用已传递的类名复制其余文本字段的外观，如问题中的第一个代码片段所示。非常感谢你另一方面，做 const {ref} = usePlacesWidget({ apiKey: process.env.REACT_APP_API_KEY, onPlaceSelected: (place) => { console.log(place); }, }); return ( <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > {label} </InputLabel> <Input ref={ref} id={id} className={className} /> </FormControl> ); 组件确实得到了样式，但搜索甚至没有执行（我认为这是预期的，但以某种方式让它工作会很好）如果没有提供的代码沙箱，很难说，但是阅读文档，问题可能在于不将引用转发到自定义输入组件： https://mui.com/material-ui/react-autocomplete/#custom-input 他们在示例中总是使用 TextField。并且react-google-autocomplete文档没有按照您尝试的方式使用它的示例https://github.com/ErrorPro/react-google-autocomplete/blob/HEAD/docs/examples.js，据我所知告诉。

css material-ui google-api autocomplete

回答 1 投票 0

无法从 Material-UI 选择组件中选择选项 - 4000 毫秒后重试超时 [已关闭]

我在使用 Cypress 为 React 组件编写集成测试时遇到问题。具体来说，我在从

reactjs testing material-ui cypress

回答 1 投票 0

如何在滚动页面时关闭以前的手风琴并到达新的手风琴？

我使用的是手风琴材质-mui。首先，所有手风琴都打开。当我滚动页面并到达第二个手风琴时，我想关闭第一个手风琴，当我到达第三个时

reactjs typescript material-ui accordion

回答 1 投票 0

Material-UI TextField Outline Label 在条件渲染时与边框重叠

https://codesandbox.io/s/material-demo-04y5b 重现步骤：点击“确认”或“有代码吗？”触发不同形式的条件渲染。单击“确认码”文本字段。不...

reactjs material-ui

回答 5 投票 0

MUI DataGrid getApplyQuickFilterFn 仅应用于第一列

我正在尝试将相同的自定义快速过滤器应用于 MUI DataGrid 中的多个列。我按照 https://v6.mui.com/x/react-data-grid/filtering/quick-filter/#custom-filtering-logic 中的示例进行操作。

material-ui mui-x-data-grid

回答 1 投票 0

MUI - 如何将选择选项放置在选择组件上方

我正在尝试将 MUI(v5) 选择组件的选项（选项数量是动态的）放置在其上方。我最初的代码是这样的： ... 我正在尝试将 MUI(v5) 选择组件的选项（选项数量是动态的）放置在其上方。我最初的代码是这样的： <Select ... > <MenuItem ... >Menu 1</MenuItem> <MenuItem ... >Menu 2</MenuItem> <MenuItem ... >Menu 3</MenuItem> </Select> 其渲染效果与此类似：我正在考虑更改 MenuProps 的anchorOrigin，以便选项将位于选择组件上方： <Select ... MenuProps={{ anchorOrigin: { vertical: 'top', horizontal: 'center', }} > <MenuItem ... >Menu 1</MenuItem> <MenuItem ... >Menu 2</MenuItem> <MenuItem ... >Menu 3</MenuItem> </Select> 其渲染效果与此类似：这不是我想要的。这与我希望的样子类似：我以为我可以使用 MenuProps -> PaperProps -> style -> transform 属性将其放置在上面，但由于选项是动态的，我真的不能这样做。如果您可以向我提供任何建议或阅读材料，我将不胜感激。谢谢！您需要为此调整transformOrigin。我这样做了，它对我有用： <Select ... MenuProps={{ anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' } }} > <MenuItem ...> Menu item 1 </MenuItem> <MenuItem ...> Menu item 2 </MenuItem> </Select>

reactjs user-interface material-ui frontend

回答 0 投票 0

MUI DataGridPro useResizeContainer - 网格的父级具有空宽度

我恳求你帮助我，因为我已经寻找答案3天了，但我无法解决这个问题。问题： MUI：useResizeContainer - 网格的父级具有空宽度。你需要做...

reactjs material-ui datagrid

回答 2 投票 0

Mui莫代尔背景黑色

我目前正在使用 mui modal，它的背景是纯黑色的，尽管我说我想要背景透明。我确实尝试将其设置为颜色：透明

javascript reactjs material-ui

回答 2 投票 0

mui 表显示不好

我使用 @mui/material 中的表格并遵循 https://mui.com/material-ui/react-table/ 对于可重现的问题，我做了一个具有固定值的静态表。我愿意 ...