material-ui 相关问题

实施Google Material Design的React组件。 http://material-ui.com

MATERIAL-UI：X-GRID / DATAGRID默认columnMenu未显示

popup单击3点何时未显示

reactjs material-ui datagrid mui-x-data-grid

回答 0 投票 0

MUIX数据网格 - 获取新数据时强迫过滤器和排序状态要重置

reactjs material-ui datagrid mui-x-data-grid

回答 1 投票 0

我真的很努力地改变Matierialui

css reactjs material-ui datagrid mui-x-data-grid

回答 1 投票 0

物质-UI datagrid：从状态原因删除一行无法读取属性错误

我有一个材料UI datagrid如下： <DataGrid className={classes.datagrid} page={page} pageSize={rowsPerPage} rows={rows} columns={columns} sortModel={sortModel} rowCount={meta.total} loading={store.panels.loading} rowsPerPageOptions={ [5, 10, 25, 50] as PageSizeOptions[] } disableSelectionOnClick onPageSizeChange={changePageSize} autoHeight onPageChange={handlePageChange} onSortModelChange={updateSort} components={{ loadingOverlay: LoadingOverlay, noRowsOverlay: NoRowOverlay, }} /> 我有一个可观察到的MOBX阵列。 const行= [来自Global Store的继承MOBX数组]然后，我从全局商店的数组中删除一行。我收到以下错误： TypeError: Cannot read property 'id' of undefined (anonymous function) node_modules/@material-ui/data-grid/dist/index-esm.js:15 etc... mobx数组是对象的数组[{id：1，name：“ bob”}，等等...] 列： const columns: ColDef[] = [ { field: 'id', hide: true }, { headerName: 'Name', field: 'name', width: 110, }, ]; 仅当我尝试删除一行时，就会发生错误。添加，获取或更新效果很好。 MUI DataGrid似乎是一个错误 https：//material-ui.com/components/data-grid/rows/ 我知道埃米尔 pix在v4.0.0-alpha.10中发布。参考：Https：//github.com/mui-org/material-ui-x/issues/571 DataGrid的确是错误。您需要将库降至版本：4.0.0-alpha.8或将其设置为“ https：//pkg.csb.dev/mui-org/material-ui-x/commit/02423225/@material-aterial-paterial-aperial-ui/data-rid/data-grid/tata-grid/tata-grid/tas-data-grid/thow/024232225

material-ui datagrid mui-x-data-grid

回答 0 投票 0

我当前使用数据网格工具栏（材料-UI数据网格组件的功能），因为我想要列显示/隐藏组件，但是我也想以Iconbutton的形式添加自己的菜单项，并在单击时打开菜单。问题是当您单击所述按钮时，工具栏似乎会重新渲染，这会导致菜单失去其锚并在左上方渲染。是否有一种特殊的方法可以在数据网格工具栏中获得播放器，以使菜单popper出现在正确的位置？

reactjs material-ui datagrid mui-x-data-grid

回答 1 投票 0

如何在MUI数据网格上重置列排序？

我想重置列排序：导入 *作为“反应”的反应；从“@mui/材料/盒子”中导入框；从'@mui/x-data-grid-pro'导入{datagridpro}; 来自'@mui/x-data-grid-

reactjs material-ui mui-x-data-grid

回答 1 投票 0

MUI数据网格布尔细胞类型条件格式

有一种有条件地格式化具有“布尔”类型的MUI DataGrid单元格的方法。这是带有布尔类型的复选框的文档中的沙盒：https：//codesandbox.io/s/1ck...

material-ui mui-x-data-grid

回答 2 投票 0

Min宽度拟合内容MUI数据网格挠性列

我将列设置为

reactjs material-ui mui-x-data-grid

回答 2 投票 0

UPDATE MUI数据网格，只有一个元素添加了一个元素

reactjs material-ui datagrid mui-x-data-grid

回答 1 投票 0

我如何主题`navigationbar（）和`navigationbariTem（）我在尝试更改所选/未选择图标的颜色和活动指示器的颜色非常困难。这些文档没有示例或适当的kdocs，我似乎找不到任何示例

NavigationBar

android material-ui android-jetpack-compose material-you android-jetpack-compose-material3

回答 2 投票 0

MuiReact下拉支柱可通过过滤器

用于填充下拉列表的API返回类似于以下值的值集：

reactjs material-ui

回答 1 投票 0

如何更改MUI AutoComplete Select的轮廓和标签颜色。我尝试通过SX属性更改许多样式，但似乎没有任何作用。如您所见，我只想将所有颜色设置为黑色。截屏

Screenshot sx 我认为您还需要应用针对Textfield的样式。根据您的屏幕截图，这就是缺少的部分。 <Autocomplete disablePortal options={top100Films} sx={{ width: { sm: "100%", md: 340 }, // ALTERNATIVE 1 "& .MuiSvgIcon-root": { color: "black", }, ".MuiOutlinedInput-notchedOutline": { borderColor: "black", }, "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "black", borderWidth: "thin", }, "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "black", borderWidth: "thin", }, "&.MuiOutlinedInput-root": { "& fieldset": { borderColor: "black", }, "&:hover fieldset": { borderColor: "black", }, "&.Mui-focused fieldset": { borderColor: "black", }, "&.MuiInputLabel-shrink": { color: "black", }, }, }} renderInput={(params) => ( <TextField {...params} label="Movie" /> )} />```

reactjs select material-ui

回答 1 投票 0

反应形式与材料UI选择输入不起作用的挂钩 textfield下方的选择应加载：它如何实际加载：我的选择组件使用材料UI + React form Hook创建，不会加载默认值。（组件应启动W ...

javascript reactjs typescript react-hooks material-ui

回答 1 投票 0

列型数据杂志线性进度栏列列我想添加一个像填充数量之类的列但是我无法弄清楚如何从文档中做到这一点，我觉得我在设置列时必须使用RenderCell，但我看不到如何完成...

reactjs material-ui

回答 3 投票 0

材料UI主动选项卡中心对齐

是否有可能在屏幕的水平中心放置活动选项卡，除了选择第一个或最后一个选项卡的情况？有可能在屏幕的水平中心放置活动选项卡，除了选择第一个或最后一个选项卡的情况外吗？ <Tabs className={classes.tabs} indicatorColor='primary' scrollButtons='auto' textColor='primary' value={activeTab} variant='scrollable' > {tabs.map(({ label, url, icon = '', id, action } => ( <Tab key={id} label={label} icon={icon} onClick={onClick} /> ))} </Tabs> activeTab是根据当前路径计算的。 onClick只需通过单击选项卡ID按下路径变化活动标签不在中央屏幕截图中中心屏幕截图中的活动选项卡单击选项卡之后，可以自动进行第二个示例情况？是的，这是可能的。您只需要创建一个运行AonClick的事件（或在Vanilla JavaScript A andonclick事件中）即可。它正在运行的是隐藏的选项卡并显示要显示的选项卡，只要索引不是0而不是长度-1. 可能您已经有一个事件处理程序，因为您的问题表明TAB激活有效。您只需要在事件中实现我上面描述的function并触发它。这种感觉有点笨拙，但是我能够通过HTML元素的scrollintoviewmethot.。要使以初始负载为中心的活动选项卡，您可以将REF与最初活跃的选项卡一起使用，以及一个：function： function选择新选项卡之后，您还可以在每个选项卡中添加一个on Click将其滚动到中心： useEffect 不幸的是，单击部分无法视图的选项卡时，这无效，因为Mui已经尝试在该情况下滚动到视图中，并且由于通过const initialTabRef = useRef<HTMLDivElement>(null); useEffect(() => { const tempScrollY = window.scrollY; initialTabRef.current?.scrollIntoView({ behavior: "instant", block: "nearest", // no need to vertically-center the tab inline: "center", // horizontally-center it within its parent }); // really janky, but instantly scrolling back to our tempScrollY is a way to appear to avoid vertical scrolling from `scrollIntoView` window.scrollTo({ top: tempScrollY, behavior: "instant" }); }, []); // ... <Tab ref={initialSelectedTab} //... other tab props /> 实现了，我不确定如何在不更改MUI逻辑本身的情况下覆盖它。

javascript reactjs tabs material-ui

回答 2 投票 0

如何在datepicker中禁用日期标签？

我可以在日期标签“ 2025年3月”上禁用Onclick。我不希望用户点击并选择一年，但仅通过< >按钮导航 “@mui/x-date-pickers”：“^6.19.8”，我...

css reactjs material-ui mui-x-date-picker

回答 1 投票 0

与使用formik和MuiTable

reactjs sorting material-ui formik mui-datatable

回答 0 投票 0

材料表：如何更改列的宽度？

我使用的是Google Material UI正式推荐为数据表库并在配置列的宽度方面正式推荐的thematerialTable

javascript reactjs material-ui material-table