实施Google Material Design的React组件。 http://material-ui.com
如何取消MuiTreeItem-group margin-left？
我正在使用MUI树，我想取消MuiTreeItem-group第二层的margin-left 我尝试使用makeStyles来解决它，但它似乎不起作用 const useStyles = makeStyles(() ...
我正在转换一些旧的 mui 样式以使用 sx 属性，并且发现您可以使用 sx = {{ someCssProp: { xs: ..., md: ... 等将样式指定为不同的断点。 我以前曾...
我在 Material-UI v5 中设置菜单组件样式时遇到问题。 我有这个用户界面： 我在 Material-UI v5 中设置菜单组件样式时遇到问题。 我有这个用户界面： <Menu defaultValue={undefined} id="simple-menu" open={openMenu} onClose={onCloseHandler} anchorEl={anchorEl} MenuListProps={{ onMouseLeave: onCloseHandler }} elevation={0} sx={{ color: "white", backgroundColor: "blue" }} > 当我使用此代码时，所有 UI 都会变成蓝色： 之后我尝试将全局样式覆盖应用到菜单的纸张上，但没有任何反应。风格没有改变： components: { MuiMenu: { styleOverrides: { paper: { backgroundColor: arcBlue, color: arcBlue, borderRadius: "0px", }, }, } } 请大家帮忙 直接在 sx 组件上传递 Menu 会将样式应用于组件的根（这就是导致样式修改应用于覆盖毯的原因）。 在您的情况下，由于您尝试仅设置菜单的 MUI 列表部分的样式，因此您希望使用 sx 属性将 MenuListProps 属性直接传递到 underlying 列表组件。例如： <Menu id="basic-menu" anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{ sx: { backgroundColor: "blue" } }} > 产生： 工作 CodeSandbox：https://codesandbox.io/s/twilight-glitter-cj83rc?file=/demo.tsx:758-951 我正在 Udemy 上做同样的课程，并且我找到了另一种方法来使用父菜单组件 sx-prop 来定位您正在设计样式的嵌套组件，而不是像第一个答案中那样使用 MenuListProp 属性的嵌套 sx-prop 。 在弄清楚这个之前，我确实使用了第一个答案： 文档中的示例可以在标题为“覆盖嵌套组件样式”的部分中找到 链接：https://mui.com/material-ui/customization/how-to-customize/#the-sx-prop 这是我的代码中的样子： 这是样式化的纸张在浏览器中的样子：
我正在使用v5 MUI，如何取消第一个项目的折叠事件？ 喜欢图片中的所有内容 并删除下拉图标 就像图片中的列表项
使用 mui datagrid 实现自定义分页。 我尝试使用 datagrid 的 slotProps 传递分页的 props，但它说 onChange 的类型不匹配。我该如何纠正它？ 什...
我有 header 、 sidenav 和主要组件。单击标题中的图标，应打开侧导航。页面变黑了，但是左边的侧边导航没有出现。而且我想推送主要内容...
React Material-ui InputLabel 组件无法相应工作
我希望标签能够正确显示，并根据其值（即标准（角色、员工数量等）设置宽度），并且不想给它固定的宽度。 但标签不完整
我有 8 个滑块，范围为 0-100，并在 0、25、50、75 和 100 处有 5 个标记。我希望用户能够在 8 个滑块上分配 350 个点。每一步显然要消耗25点不然返...
我正在尝试使用 Material UI 折线图在我的 NextJS 14 应用程序上显示一些数据。数据显示得很好，但是当我将鼠标悬停在图表上时，图表只会呈现线条，而不是 ins...
如何在下一个js应用程序路由器中实现mui风格的组件而不使用“使用客户端”
我想在nextjs 14中使用mui风格的组件，但在每个页面上我必须写“使用客户端”，我想使用nextjs ssr功能但它强迫我进行csr，如何实现它？请
MUI Datagrid preProcessEditCellProps 错误消息
如何向 mui preProcessEditCell 添加错误消息？ 我想在错误文本中显示“供应商名称不能为空” { 字段：“供应商名称”， headerName: "名称&...
为什么我的 MUI X 折线图在将鼠标悬停在任何图表标记点上时仅显示最后一个值
我正在利用 MUI x 图表来直观地显示数据。图表可视化本身运行正常。但是，我遇到了一个问题，仅显示最新的标记点...
无法单击移动光标或突出显示 Material UI TextField 内的文本
我在 React 项目中使用 Material UI TextField 组件。我无法突出显示文本或单击以将光标移动到其中。 我在 React 项目中使用了 Material UI TextField 组件。我无法突出显示文本或单击以将光标移动到其中。 <TextField variant={"standard"} className={styles._input} multiline={true} fullWidth={true} onChange={ onChange } value={ spec.t } autoFocus={true} onFocus={event => { event.target.select() }} onClick={() => console.log(">>>> CLICKED TEXT INPUT")} placeholder={"Enter Text"} /> _input类只是设置TextField的字体。 我附加的 onClick 事件处理程序肯定会在每次单击或拖动到其中时触发，因此这不是 z-index 设置得足够高的问题。我的项目中的 CSS 中也没有任何 user-select: none。 还有其他我应该注意的事情可能会导致这种情况吗？我真的很困惑为什么会发生这种情况。这只发生在这个人身上TextField；其他TextFields在我的项目工作中按预期进行。 我也遇到了同样的问题，事实证明，如果您有任何 JavaScript 可能在单击处理程序或相关事件侦听器中调用 event.preventDefault() 或类似方法，这可能会干扰表单元素的正常行为。 通过停止事件传播或阻止默认操作来确保没有父级或相关事件处理程序进行干扰
我需要一个垂直居中的盒子，里面有内容，然后在下面有一个可选的第二个盒子。当显示第二个框时，第一个框的位置不应改变 - 澄清一下，...
当 options 属性为空时，Mui 自动完成组件显示空列表
（ <Autocomplete id="recordlist" freeSolo options={[""]} renderInput={(params) => ( <TextField sx={{ width: 300 }} onChange={this.handleChange} {...params} label="record" /> )} /> 使用上述代码自动完成时添加一个空列表不需要的框，如下图所示： 当选项列表为空时，如何删除这个空框？当从服务器接收到选项时，选项列表将被填充。但最初我不想有任何选项并删除这个奇怪的空选项框。 您仍然提供选择权""。将其替换为空数组options={[]} 也许有点晚了，但你可以将其添加到你的CSS中以删除空列表 ul.rz-autocomplete-list:not(:has(> *)) { padding: 0; }
有人可以帮助我使用material-ui 库将 TextField 个性化设置为 TextArea 吗？我没有找到任何应该将其个性化为 TextArea 的参数：https://github.com/
MUI ThemeProvider 与 NextJS 14（应用程序路由器）失败
我有一个使用 Material ui 组件库运行的 NextJS 应用程序。我尝试将 ThemeProvider 集成到项目的根目录（/app/layout.tsx），但它在运行时抛出看似不相关的错误...
我想覆盖后台主面板屏幕（例如组件、创建和 API）上的按钮颜色。这适用于圆角和字体大小，但不会改变这些按钮的颜色（...
React 无法识别 DOM 元素上的 `justifyContent` 属性
const useStyles = makeStyles((主题) => ({ 根：{ 填充：0， 文本对齐：'左'， flexDirection: '100vh', }, })); 返回 （ const useStyles = makeStyles((theme) => ({ root:{ padding: 0, textAlign: 'left', flexDirection: '100vh', }, })); return ( <Container> <div className={classes.root}> <Grid container spacing={2} className={classes.Grid} justifyContent="center"> <Grid item xs={12}> <RadioGroup row aria-label="type" name="name" className={classes.weightradio} defaultValue={"1"} value={weightRadio} onChange={handleWeightRadio}> <FormControlLabel value="1" control={<Radio />} label="1kg" /> <FormControlLabel value="2" control={<Radio />} label="2kg" /> <FormControlLabel value="others" control={<Radio />} label=">3kg" /> </RadioGroup> </Grid> ..... </Gid> 日志告诉我--- index.js:1 警告：React 无法识别 justifyContent 属性 在 DOM 元素上。如果你故意希望它在 DOM 中显示为 自定义属性，请将其拼写为小写 justifycontent。如果 您不小心从父组件传递了它，请将其从 DOM 元素。 我查了MUI 4.0的文档，justifyContent是支持的，问题出在哪里 好的，我得到答案了。 justify 而不是 justifyContent ，并且不应该设置为 Grid root ，正确的代码如下， <Grid container spacing={2} className={classes.Grid}> <Grid item xs={12} container justify="center"> //changed here <RadioGroup row aria-label="type" name="name" className={classes.weightradio} defaultValue={"1"} value={weightRadio} onChange={handleWeightRadio}> <FormControlLabel value="1" control={<Radio />} label="1kg" /> <FormControlLabel value="2" control={<Radio />} label="2kg" /> <FormControlLabel value="others" control={<Radio />} label=">3kg" /> </RadioGroup> </Grid> 版本有差异。并非所有 4.* 版本都支持 justifyContent 可能早于 4.12 的版本仅运行 justify： https://github.com/mui-org/material-ui/pull/21845 对于 4.11.4 来说绝对是这样 <div style={{ justifyContent: 'center' }}>...</div>
Typescript/React/MUI 在 Button 组件上使用自定义颜色
我尝试将自定义颜色应用于按钮组件，但出现错误。可能的解决方案是什么？ 我像文档中那样进行了模块模块增强，但问题仍然存在： https://mui.com/