material-ui 相关问题

如何显示带有粘性标题的滚动阴影MUI桌子

我有一个带有粘稠标题的MUI桌子。 我希望每当桌子在顶部时，它都会在标题下方的顶部显示阴影。 当滚动完全在底部时，它在...

mui选项卡不可滚动，因为root具有溢出-x：hidden

如何锚定反应材料弹出/菜单，而不是左

我将我的验证按钮添加到我的网站上的材料菜单中，事实证明这很痛苦。我将菜单固定在右侧，因此它与我的登录按钮的右下角保持一致，并扩展到

按钮类型提交不要触发react.js

const Register = () => { const { palette } = useTheme(); const dispatch = useDispatch(); const navigate = useNavigate(); const isNonMobile = useMediaQuery("(min-width:600px)"); const register = async (values, onSubmitProps) => { // this allows us to send form info with image const formData = new FormData(); for (let value in values) { formData.append(value, values[value]); } formData.append("picturePath", values.picture.name); const savedUserResponse = await fetch( "http://localhost:3001/auth/register", { method: "POST", body: formData, } ); const savedUser = await savedUserResponse.json(); console.log("saved User : ", savedUser); onSubmitProps.resetForm(); // if (savedUser) { // setPageType("login"); // } navigate("/"); }; const handleFormSubmit = async (values, onSubmitProps) => { console.log("Register handler: ", values); return await register(values, onSubmitProps); }; return ( <Formik onSubmit={handleFormSubmit} initialValues={initialValuesRegister} validationSchema={registerSchema} > {({ values, errors, touched, handleBlur, handleChange, handleSubmit, setFieldValue, resetForm, }) => ( <form onSubmit={handleSubmit}> <Box display="grid" gap="30px" gridTemplateColumns="repeat(4, minmax(0, 1fr))" sx={{ "& > div": { gridColumn: isNonMobile ? undefined : "span 4" }, }} > <TextField label="Email" onBlur={handleBlur} onChange={handleChange} value={values.email} name="email" error={Boolean(touched.email) && Boolean(errors.email)} helperText={touched.email && errors.email} sx={{ gridColumn: "span 4" }} /> <TextField label="Password" type="password" onBlur={handleBlur} onChange={handleChange} value={values.password} name="password" error={Boolean(touched.password) && Boolean(errors.password)} helperText={touched.password && errors.password} sx={{ gridColumn: "span 4" }} /> </Box> {/* BUTTONS */} <Box> <Button fullWidth type="submit" sx={{ m: "2rem 0", p: "1rem", backgroundColor: palette.primary.main, color: palette.background.alt, "&:hover": { color: palette.primary.main }, }} > REGISTER </Button> <Typography sx={{ textDecoration: "underline", color: palette.primary.main, "&:hover": { cursor: "pointer", color: palette.primary.light, }, }} ><Link href="/"> Already have an account? Login here. </Link> </Typography> </Box> </form> )} </Formik> ); }; export default Register;

I有一个组合图，可以在该数据的典型范围内显示特定数据。 它由两个堆叠的区域图组成，第一个图形可见以显示四分位数的数据范围，...

<ResponsiveChartContainer xAxis={[ { //... disableLine: true, disableTicks: true, //... }, ]} yAxis={[yAxis]} // similarly defined series={[ { type: 'line', id: `StateData-${energy}-25`, yAxisId: yAxis.id, // ... }, { type: 'line', id: `StateData-${energy}-75`, yAxisId: yAxis.id, // ... }, { type: 'line', id: `tract-${energy}`, yAxisId: yAxis.id, // ... }, ]} {// ...} > <AreaPlot /> <LinePlot /> <ChartsXAxis axisId="date" /> <EnergyChartYAxis selectedChartType={selectedChartType} energy={energy} /> <ChartsLegend direction="row" position={{ horizontal: 'middle', vertical: 'top' }} /> <ChartsAxisHighlight axisHighlight="line" /> { // this doesn't do anything } <ChartsTooltip trigger="axis" /> <ChartsGrid vertical /> <ChartsGrid horizontal /> </ResponsiveChartContainer>

材料UI DataGrid垂直滚动条

我想在没有任何垂直滚动条的情况下渲染材料UI datagrid。这是网格的代码： 返回 我想在没有任何垂直滚动条的情况下渲染材料UI datagrid。这是网格的代码： return <div style={{height: 400, width: '100%', } }> <DataGrid className={classes.root} rows={closedPositions} columns={columns} rowHeight={20} headerHeight={25} disableSelectionOnClick pageSize={20} autoPageSize={true} scrollbarSize={1} components={{ pagination: CustomPagination, }} /> autoPageSize的文档是： If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar. 我很困惑，因此为什么我有一个滚动条。即使我将DIV设置为高度10,000，桌子上没有排，但仍然有一个滚动条。 furthermore，15和1的滚动条之间没有区别（对于水平滚动条，我想要）。 没有人知道怎么了？ 您尝试以下代码吗？ autoHeight={true} 对我来说很好。 example. <div style={{ width: "100%" }}> <DataGrid rows={rows} columns={columns} autoHeight={true} /> </div> 我认为以上答案已过时： <DataGrid getRowHeight={(params) => 350 }} />

如何将材料 - UI卡组件集中在页面中间？

我试图将材料 - UI卡组件集中在页面中间，但我面临问题。我正在使用网格组件并设置布局，但是卡没有得到居中的verti ...

Typescript 类型定义，用于向 MUI 样式实用程序提供样式

我正在 MUI v5 中创建一堆样式组件，它们定义了一些额外的 props。 const SomeContainer = styled(Box, { 名称：“SomeContainer”， 插槽：“根” ...

使用输入的文本而不是下拉列表中的项目获取 Material UI 自动完成输入

我正在使用 Material UI (5) 自动完成功能为以下用户场景提供搜索功能： 用户输入文本，然后按 Enter -> 转到包含该文本的搜索页面 用户输入 tex...

如何将任何辅助操作 DOM 元素放置在 ListItemButton 旁边？

我正在处理一个列表，用户可以单击列表项来执行操作，但他们也可以单击列表项旁边的按钮（带有文本）来执行另一个操作。 鉴于此代码（

Material-UI CSV/PDF 打印导出无法使用“@mui/x-data-grid”模块工作

这可能是一个愚蠢的问题，但我很困惑，除非我错过了一些东西，否则这没有意义。我想使用导出选项将我的数据打印为 PDF，因为每个人都可以使用

TypeError：无法使用 MUI DatePicker 读取 Luxon 中未定义的属性（读取“等于”）

将 luxon 与 MUI 的 @mui/x-date-pickers 中的 DatePicker 组件一起使用时，我遇到了 TypeError。错误信息是： 错误 无法读取未定义的属性（读取“等于”） 键入呃...

如何让文本在图标下换行？

<Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", }} > <FolderIcon /> <Typography variant="h6" sx={{ flex: 1 }}> {resourceCategory.name} </Typography> </Box> 这会导致 如何让文本在图标下方换行？我希望图标中心与文本对齐并在其下方很好地包裹。 实现此目的的方法是使用 flexDirection，因为您使用的是 flex 并将其设置为 column，因为 flexDirection 的默认值为 row。 <Box sx={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 2, flexWrap: "wrap", }} > <FolderIcon /> <Typography variant="h6" sx={{ flex: 1 }}> {resourceCategory.name} </Typography> </Box>

AutoComplete Material UI 不会根据 inputValue 过滤选项

我正在尝试使用 mui 实现自动完成字段，其选项将根据全局搜索而更改，无论根据全局搜索过滤的数据如何，其描述设置为

有什么方法可以将InputBase与多个项目的自动完成功能结合使用？

我在编辑模式下在 MUI DataGrid 中使用自动完成功能，但由于 TextField 它会呈现额外的边框。 我在编辑模式下的 MUI DataGrid 中使用自动完成功能，但由于 TextField，它会呈现额外的边框。 <Autocomplete multiple freeSolo value={value || []} onChange={(event, newValue) => { api.setEditCellValue({ id, field, value: newValue }, event); }} options={['aaa', 'bbb']} renderInput={(params) => <TextField {...params} />} fullWidth /> 当没有 Autocomplete 时我正在做的就是使用 InputBase 代替，但这里我尝试使用 renderInput 属性进行多次尝试，输入显示，但所选项目作为芯片的逻辑不存在（其中在某种程度上是有意义的，因为它是原始输入）。 您知道重用所有 TextField 逻辑但不使用包装元素 MuiFormControl 的正确方法吗？ （同时我会修补CSS以使之更合适） 谢谢你， 您可以将 TextField 自定义为如下所示，而无需将其包装在 MuiFormControl 中。如果是外观让您烦恼的话。 类似这样的： <Autocomplete multiple freeSolo value={value || []} onChange={(event, newValue) => { api.setEditCellValue({ id, field, value: newValue }, event); }} options={['aaa', 'bbb']} renderInput={(params) => ( <TextField {...params} variant="standard" // Use a variant with no FormControl border InputProps={{ ...params.InputProps, disableUnderline: true, }} sx={{ '& .MuiFormControl-root': { display: 'unset', }, }} placeholder="Type something" /> )} /> 如果需要使用InputBase，可以试试这个： <Autocomplete multiple freeSolo value={value || []} onChange={(event, newValue) => { api.setEditCellValue({ id, field, value: newValue }, event); }} options={['aaa', 'bbb']} renderTags={(tagValue, getTagProps) => tagValue.map((option, index) => ( <Chip key={option} label={option} {...getTagProps({ index })} /> )) } renderInput={(params) => { const {InputProps, ...rest} = params return ( <InputBase {...rest} {...InputProps} inputRef={params.InputProps.ref} placeholder="Type something" fullWidth /> ) }} /> 而且，您不仅需要传递给 BaseInput 参数，还需要从那里提取专门针对该字段的参数 (params.InputProps)，并且不要忘记还指定 inputRef

在 MUI 的 AutoComplete 中使用 renderOption

今天我带着一个过去几天一直困扰我的问题来找你。 我试图做到这一点，以便我的自动完成功能在选项中显示一个标签，但值不同。所以我就走了...

使用“TAB”键导航 React MUI 菜单会关闭菜单

我已经基于如何使用 Material-UI 构建全宽巨型菜单？ 构建了一个 MegaMenu？ 出于可访问性的原因，应该可以通过选项卡浏览菜单中的链接并选择其中一个链接...

基于 React 的 Web 表单构建器 UI，提供工作流程（多页表单）

我熟悉react-jsonschema-form，但我正在寻找的不止于此。 我需要的是能够（也许在 JSON 中）指定多页表单以及这些表单之间的工作流程（即

如何在反应中为行提供替代颜色？

我在react js中创建了一个表。我想为替代行提供替代颜色。我想为所有偶数行提供一种颜色，为所有奇数行提供另一种颜色。怎样才能做到呢？ 我不是

如何更改 Material-UI 选项卡中活动选项卡下线条的颜色？

当使用 type="number" 时，如何从 Material-UI TextField 中删除微调器按钮（向上/向下箭头）？ 当我尝试这个 css 但它不起作用时，我可以找到新的 pro...