实施Google Material Design的React组件。 http://material-ui.com
如何使用 chrome WAVE 工具修复 Material UI Select 中的“缺少表单标签”错误
我正在使用材质 UI Select，我们正在使用 chrome WAVE 工具来修复 ADA 问题。材料 UI 选择上出现“缺少表单标签”的错误，如下面的屏幕截图所示。谁能帮我
我想显示一个数字时间选择器或持续时间选择器（仅m，s）。我的项目主题是material UI，nextjs，所以我使用materialUI配置来实现这个，但它总是显示模拟时钟。下面是...
我将 Material-UI 的 TablePagination 组件与 React 结合使用。 但这个组件没有禁用属性。 我有一个布尔加载值，我想将其用作参数来启用或禁用箭头...
我正在使用MUI5和reactjs，我想使用makeStyles向MUI组件添加一些自定义CSS，但它不允许我在makestyles中使用默认主题，所以我的代码是： 我...
如何将 Material-UI Autocomplete 与 virtua 一起使用？
有一些使用 Material-UI Autocomplete 与列表虚拟化库的示例。 MUI 在其示例之一中使用了 react-window 库，但值得注意的是，这
我想通过slots.mark属性注入一个自定义的MarkElement。如何更改 MarkElement 的大小？ const slotMark = (道具: MarkElementProps) => { 返回 （ 我想通过 slots.mark 属性注入自定义 MarkElement。如何更改 MarkElement 的大小？ const slotsMark = (props: MarkElementProps) => { return ( <MarkElement {...props}/> ) } 我设法通过 color 属性更改颜色，但我没有找到尺寸的属性。 MarkElement中的默认mui-x组件是SVG路径： https://github.com/mui/mui-x/blob/c7795d90ce0c300415cf76b136a1496754683309/packages/x-charts/src/LineChart/MarkElement.tsx#L121 这意味着没有直接的方法来改变它的大小；整个形状都编码在其 d 属性中。如果您点击我提供的链接，您将看到该属性的值是通过 d3 的 symbol 函数生成的（此处导入为 d3Symbol）；您可以阅读其文档here，它应该可以帮助您构建自定义标记，您可以使用slots API 将其提供给图表。据我所知，没有其他方法可以做到这一点。
有人知道如何更改 MUI 库中 DatePicker 组件内自动出现的日历图标的颜色吗？ 我尝试通过这样的道具设置颜色 有人知道如何更改 MUI 库中 DatePicker 组件内自动出现的日历图标的颜色吗？ 我尝试通过这样的道具设置颜色 <DatePicker label="Controlled picker" value={value} onChange={(newValue) => setValue(newValue)} InputAdornmentProps={{ style: { "& .MuiSvgIcon-root": { color: "orange", }, }, }} /> 我的目标是设置 DatePicker 组件内日历图标的颜色/背景颜色 你瞄准了错误的元素MuiButtonBase应该可以解决问题 style: { "& .MuiButtonBase-root": { color: "orange", }, 这对我有用。您也可以查看此页面以供参考： https://mui.com/x/react-date-pickers/custom-components/#component-2 代码： <DesktopDatePicker name="Date_Of_Birth" format="DD/MM/YYYY" inputFormat="DD/MM/YYYY" value={value} onChange={(newValue) => { setValue(newValue); }} renderInput={(params) => ( <TextField {...params} fullWidth /> )} slotProps={{ inputAdornment: { position: "end", }, // To change icon styles openPickerIcon: { sx: { color: "#f05736", }, }, }} // To change Icon Image slots={{ openPickerIcon: () => ( <img src={DateIcon} alt="date-icon" style={{ cursor: "pointer" }} onClick={() => setOpen(true)} /> ), }} />
我正在尝试从@angular/material库创建一个，其中表单字段的宽度很小（75px），但下拉菜单更大以容纳更长的文本选项...
我正在努力在我的应用程序中实现 MUI 自动完成。根据 MUI Grouped Docs 文档，我们通过访问 params.key 将键添加到映射列表中 renderGroup={(参数) => ( 我正在努力在我的应用程序中实现 MUI 自动完成。根据文档 MUI Grouped Docs，我们通过访问 key 将 params.key 添加到映射列表中 renderGroup={(params) => ( <li key={params.key}> <GroupHeader>{params.group}</GroupHeader> <GroupItems>{params.children}</GroupItems> </li> )} 我收到一条错误消息，指出 Warning: Encountered two children with the same key。 有人可以告诉我params.key对应什么吗？我认为这将是 id 或 index 但如果是这样的话我就不会收到此错误。 将 params.key 替换为 params.group.id。
我正在尝试用自定义工具提示替换重新图表默认工具提示。 现有的工具提示如下所示。 我想将上面的默认工具提示替换为 我为代码制作了沙箱。 谢谢
Preact 表明您可以将其与 HTML 一起使用，以实现此处的无构建设置。这在我的手机上运行良好，因为由于符号链接我无法让 Vite 工作。 MUI 展示了如何安装和使用它
Material UI 新手，希望这个问题有意义。我正在使用 Material UI 选项卡，并且能够根据需要自定义 css。见下文： 我遇到的问题是所选选项卡和
React.js -- 输入字段 -- 输入字母“c”或“n”时失去焦点
所以我在 MaterialUI 的 MenuItem 内有一个输入字段，并且该 MenuItem 在 Menu 内。由于某些奇怪的原因，只有在输入字母“c”或＆q时，输入字段才会失去焦点......
我在 React 应用程序中使用 Material-UI (MUI) 中的 DesktopDateTimePicker 组件。该组件专为桌面使用而设计，不太适合移动屏幕。 我愿意
react-hook-form材料ui文件上传不给出FileList
我在提交表单时遇到了 React hook 表单和material-ui 文件上传的问题，我得到了一个文件的字符串路径而不是 FileList 实例
从 '@mui/x-date-pickers/AdapterDayjs' 导入 { AdapterDayjs }; 从 '@mui/x-date-pickers/LocalizationProvider' 导入 { LocalizationProvider } ； 从 '@mui/x-date-pickers/
如何在Material-UI Circular Progress中添加额外描边
我正在尝试使用 Material-UI 创建一个确定的循环进度，如下所示：circular Progress image 下面的代码似乎没有显示额外的圆圈作为背景： 我正在尝试使用 Material-UI 创建一个确定的圆形进度，如下所示：圆形进度图像 下面的代码似乎没有显示额外的圆圈作为背景： <CircularProgress variant="determinate" value={value} /> 我检查了有关循环进度的MUI 文档，但我找不到任何支持此行为的道具。据我所知，MUI 使用单个 svg 组件来实现循环进度，根据我的理解，它只能使用 2 个 svg 来实现，其中一个作为骨架，另一个作为加载进度。 我的问题是如何向圆形进度添加额外的描边颜色/实现与上面的图像链接中所示的相同效果？任何帮助是极大的赞赏。谢谢！ 查看文档的自定义部分。 简而言之，是的，您需要第二个带有 value=100 的圆圈。 这是 JS 代码示例，应该可以实现您想要的功能： import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import CircularProgress from "@material-ui/core/CircularProgress"; const useStyles = makeStyles((theme) => ({ root: { position: "relative" }, bottom: { color: "blue" }, top: { color: "red", animationDuration: "550ms", position: "absolute", left: 0 }, circle: { strokeLinecap: "round" } })); export default function MyCircularProgress(props) { const classes = useStyles(); return ( <div className={classes.root}> <CircularProgress variant="determinate" className={classes.bottom} size={40} thickness={4} {...props} value={100} /> <CircularProgress variant="determinate" disableShrink className={classes.top} classes={{ circle: classes.circle }} size={40} thickness={4} value={33} {...props} /> </div> ); } 你可以做这样的事情。 <CircularProgress variant="determinate" value={40} style={{ width: "100px", height: "100px", borderRadius: "100%", boxShadow: "inset 0 0 0px 11px gray", backgroundColor: "transparent", }} thickness={5} /> 调整盒子阴影和厚度。
当 Material UI 滑块组件使用主题中设置的渐变进行渲染时，出现错误。即使滑块样式中不使用渐变。 主题是这样设定的： 导入 { 组件...
我正在尝试在ReactCurrencyInput字段中渲染customInput，到目前为止我所拥有的是： 从 '@mui/material' 导入 { TextField, TextFieldProps }; 从“反应”导入反应； 从 '
我在使用 Material-UI DataGrid 组件时遇到问题，特别是与单元格编辑和更新网格中的值有关。我尝试了几种不同的方法，但没有......