material-ui 相关问题

我如何更改打开日期选择器按钮的颜色？

从“react”导入React 从 '@mui/x-date-pickers' 导入 { DesktopDatePicker }； 函数日期选择器() { 返回 （ import React from 'react' import { DesktopDatePicker } from '@mui/x-date-pickers'; function DatePicker() { return ( <DesktopDatePicker slotProps={{ textField: { variant: 'filled', focused: true, color: 'secondary', sx: { mb: 3, ml: 5, color: 'red' } } }} /> ) } export default DatePicker 我想更改打开日期选择器的图标的颜色，但我不知道该怎么做 您可以使用名为 renderInput 的 prop，它可以简化非 Material UI 文本字段输入组件的使用： https://mui.com/material-ui/migration/pickers-migration/#render-input 在其中，您将编写一个组件来呈现一个 TextField，该 TextField 会传播现有参数并使用 prop SX 来设置自定义字段的样式。 你的代码应该是这样的： <DesktopDatePicker label="Select Date" value={selectedDate} onChange={handleDateChange} renderInput={(params) => ( <TextField {...params} label="Select Date" variant="filled" color="secondary" sx={{ mb: 3, ml: 5, '& .MuiIconButton-root': { color: 'red', } }} /> )} /> <DesktopDatePicker label="Select Date" value={selectedDate} onChange={handleDateChange} renderInput={(params) => ( <TextField {...params} label="Select Date" variant="filled" color="secondary" sx={{ mb: 3, ml: 5, '& .MuiIconButton-root': { color: 'red', } }} /> )} />

如何向 Material-UI Select 添加图标？

我需要添加一个位置图标来反应 Material-UI 选择选项。但没有选项...我在 select 中阅读了 API 文档，但找不到相关选项。所以我真的需要你的帮助......

React MUI 条件 isChecked 复选框

我在 React 应用程序中使用 MUI 库中的 Checkbox 组件。我需要根据条件动态选中或取消选中此复选框。 条件取决于我...

排除菜单中最后一项之后的 MUI 分隔线

我正在使用 MUI 组件并在每个类别后面添加一个分隔符。有没有办法排除最后一个类别之后的分隔线？ 这是我的代码； （分隔符位于标签之前的底部......

如何在主题调色板中添加超过2种配色方案，如浅色、深色、abc、def？除了光明与黑暗之外，不接受任何事物

我使用的是mui版本5.11.13。我已经配置了我的 theme.tsx 如下。 还尝试通过增强模块。 从“@mui/material/styles”导入{experimental_extendTheme作为extendTheme}；

自动完成中的嵌套类别 - 选择后重置/清除

我正在构建一个用户界面，用于使用“嵌套”自动完成组件按类别过滤产品。 我有一个面包屑来显示当前选择的类别，并自动完成以选择一个...

mui datagrid 中的过滤屏幕已损坏

<DataGridPremium initialState={{ columns: { columnVisibilityModel: { actions: false, }, }, }} rows={productList} columns={columns} pageSize={10} autoHeight disableRowSelectionOnClick="true" localeText={customizeDataGrid()} slots={{ toolbar: () => ( <GridToolbar showQuickFilter csvOptions={{ fileName: 'Ürün Listesi', delimiter: ';', utf8WithBom:true, }} printOptions={{ disableToolbarButton: true, }} excelOptions={{ fileName: "Ürün listesi", includeHeaders: true, }} /> ) }} /> 当您使用 Mui DataGrid 中的滚动条滚动表格时，表格中的过滤屏幕会变得扭曲。 我尝试通过 mui datagrid-root 来完成此操作，但没有成功。 问题解决了。这是因为屏幕上的样式而发生的。

如何在不给父组件指定固定高度的情况下向 MaterialUI DataTable 添加加载微调器？

我有一个 MaterialUI DataTable，其定义如下： “自动”... 我有一个 MaterialUI DataTable，其定义如下： <div style = {{height: 300}}> <DataGrid loading={true} getRowHeight={() => "auto"} getEstimatedRowHeight={() => 250} rows={rows} columns={gridColumns} initialState={{ pagination: { paginationModel: { page: 0, pageSize: 50 }, } }} /> </div> 如果我删除 height: 300，则不会出现默认加载微调器。但是，我不想要固定的高度，而是希望表格能够根据行数增大和缩小。 我如何 1) 显示旋转器并 b) 允许桌子具有动态高度？是否可以以某种方式修改微调器的 CSS？ 在 MUI 上玩了一下示例后，似乎原因是 getEstimatedRowHeight 方法。当我使用像你这样的高数字（200）时，我必须滚动才能看到加载器，因为桌子高度增加到nbOfColumns*200px。但如果我使用较小的值（例如 40），数据网格不会拉伸，并且加载器会正确显示在数据网格的中心。

Mui 弹出窗口，点击外部时禁用关闭

我正在使用 Mui Popover 和 ReactJS， https://mui.com/material-ui/react-popover/ 当用户用鼠标在弹出窗口之外单击时，弹出窗口将关闭， 我如何禁用此行为并添加一个按钮......

如何从MUI DataGridPro获取当前过滤后的数据

在DataGridPro应用过滤器后，我想获取当前过滤后的数据，以便在另一个组件中使用它。 我试图从 DataGridPro API 文档中找到一个事件，但我没有......

更改材质UI列表按钮事件中所选项目的颜色

我有带有按钮的侧边栏，当我单击一个按钮时，我想在选定的按钮上设置颜色，但它无法正常工作，因为有时需要单击两次才能设置颜色，我不知道为什么。 ...

我正在尝试使用 Material Ui 添加两个应用栏组件，我如何摆脱分隔两个应用栏的线

我正在尝试在 Material-UI 中添加两个 AppBar 组件，一个在另一个之上。但是，我遇到一个问题，即第一个 AppBar 的末尾、第二个 AppBar 的顶部出现一行。 这是一个

MaterialUI v5 -> 如何设置自动完成选项的样式

我正在尝试将一些基本样式应用于 MUI v5 中的自动完成组件内的选项。我只是想改变悬停时的背景颜色，并基于它是否被选择......

使用 CSS 设置 Material UI 组件的样式

我有一个 Material UI 组件，我正在尝试使用 CSS 自定义它的样式。 以下是代码： C...

Material-ui 的 sx 属性是否会生成类似于 tailwindcss 的优化实用程序类？

使用 tailwind css 时，它的编译方式如下： 编译为 .字体粗体{ 字体粗细：...

MatMenu 中按钮上的 tabindex 角度不起作用

我正在我的 Angular 17 项目中使用材料。我想在我的项目中添加 ADA 合规性，并在必要时添加 tabindex。 我面临的问题是，我在垫菜单和选项卡中有按钮...

css `overflow:auto` 从弹性容器中溢出固定宽度子元素的大小

我有一些非常奇怪的 CSS 谜题要告诉你们： 考虑下面的树： 应用程序容器 柔性容器 item1 - 固定宽度(80px) item2 - 响应宽度（宽度：100%）。 MUI 步进器 - 溢出：

TimePicker 的 Z 索引

在我的应用程序中，我有一个用于设置事件数据的弹出窗口。这些数据之一是时间。为此，我使用 MUI 中的 DateTimePicker。 在我的应用程序中，我有一个用于设置事件数据的弹出窗口。这些数据之一是时间。为此，我使用 MUI 中的 DateTimePicker。 <Popup width={600} height={600} /../ > <div className={"group"}> <div className={"label1"}>Name</div> <div className={"label2"}> <FormControl> <DesktopTimePicker 我遇到的问题是 TimePicker 的第二个弹出窗口仍然隐藏在第一个弹出窗口后面。我尝试将 z-index 更改为 10000，但这没有帮助。在浏览器中显示如下： .css-1anqmj6-MuiPopper-root-MuiPickersPopper-root { z-index: 1300; } .MuiPickersPopper-root { z-index: 10000; } 这是否意味着我无法覆盖该值？ 这是我的CSS： .MuiPickersPopper-root { z-index: 10000; !important; } .group { display: flex; margin: 0.6em; align-items: center; flex-direction: row; } .group .label1 { display: inline-block; width: 25%; } .group .label2 { display: inline-block; width: 75%; } 几个小时后我发现了问题——索引后面的分号必须删除：z-index: 10000 !important;

如何将材质反应表固定列和所选行的透明度设置为“0”？

我正在使用 Material React 表格文本。 我为我的表启用了 rowSlection 和 columnPinning 选项。 默认情况下，固定列具有一定程度的透明度，我已经覆盖了 u...

Next.js 中的元数据更改问题：.next 文件夹重建后元数据被覆盖

我在 Next.js 应用程序中遇到元数据自定义问题。虽然我能够成功修改我的layout.tsx文件中的元数据，但这些更改没有反映在c中...