material-ui 相关问题

Material UI 工具提示未出现在 Joomla 网站上

我有一个应用程序在 Joomla（版本 4）的实例上运行。 我正在尝试使用 Material UI Tooltip 组件： 按钮 我有一个应用程序在 Joomla（版本 4）的实例上运行。 我正在尝试使用 Material UI Tooltip 组件: <Tooltip title="Tooltip"> <Button>Button</Button> </Tooltip> 但是当我将鼠标悬停在按钮上时，什么也没有出现。我做错了什么？ 自 Joomla 4 起，默认管理员模板（“Atum”）包含此 SCSS： // set up hidden tooltip [role="tooltip"]:not(.show) { z-index: $zindex-tooltip; display: none; padding: .5em; margin: .25em; color: $white; text-align: start; background: $black; border-radius: .2rem !important; } Tooltip 组件使用 role="tooltip" 来实现可访问性，因此 Atum 模板的样式会压倒 Tooltip 的样式。 您可以通过再次覆盖样式来修复它： [role="tooltip"].MuiTooltip-popper { display: unset !important; padding: unset !important; margin: unset !important; color: unset !important; text-align: unset !important; background: unset !important; border-radius: unset !important; }

是的带有验证的文本字段

我有一个文本字段，它接受连字符和数字，最小值为 10，最大值为 20。在模糊时，如果最小值和最大值不满足，文本字段应显示错误消息。但是，它也将连字符作为值。怎么...

仪表板布局 - Material UI 的路由不正确？

我正在将 Material-UI DashboardLayout 集成到我的 React 项目中，但遇到了路由问题。当我在导航中定义像“/dashboard/review-files”这样的段时，它...

如何在 Material UI X-Grid 中获取过滤后的行数？

我有这个 XGrid： 我有这个 XGrid： <XGrid pageSize={pageSize} page={page} rowsPerPageOptions={[25, 50, 100]} rowCount={handleRowCount} onPageChange={onHandlePageChange} onPageSizeChange={onHandlePageSizeChange} rows={rows} columns={columns} paginationMode="server" pagination disableColumnResize={true} hideFooterSelectedRowCount={true} /> 每当我对网格应用过滤器时，行数保持不变。我正在编写一个函数来让 rowCount 动态变化，但我不知道如何从过滤的行中获取计数。例如，如果我默认有 60 行，并且我对有 2 行的位置应用过滤器，那么我希望网格将 2 显示为 rowCount。 这是我试图实现的函数的伪代码： const handleRowCount = () => { if (filter) { rowCount = filteredRowCount; // I do not know how to get this value. } else { rowCount = serverRowCount; } return rowCount; } 这是正确的做法吗？我尝试删除 rowCount 属性，但我面临的问题是过滤仍然显示后端的行总数，并且网格不会返回到第一页。我尝试将分页更改为“客户端”，但仅显示行的第一页。 您可以使用“gridExpandedRowCountSelector” <XGrid pageSize={pageSize} page={page} rowsPerPageOptions={[25, 50, 100]} rowCount={handleRowCount} onPageChange={onHandlePageChange} onPageSizeChange={onHandlePageSizeChange} rows={rows} columns={columns} paginationMode="server" pagination disableColumnResize={true} hideFooterSelectedRowCount={true} onFilterModelChange={() => { setTimeout(() => { // filteredRowsCount is the number you look for setFilteredRowsCount(gridExpandedRowCountSelector(apiRef)) }, 100); }} />

如何阻止表格内的文本字段在编辑时取消选择？

我正在创建一个表格，列出在为 HR Web 应用程序创建调查时的调查问题。计划的功能之一是让用户能够修改具有以下功能的问题文本......

如何通过 MUI 选项卡使用（NextJS 的）并行路由？

我们有 MUI 的选项卡组件，并且我们有插槽的并行路由。 我尝试创建这个目录结构。但无法正常工作。 重新加载会引发仪表板/精选错误 仪表板/显示没有...

如何在 Material UI Slider 中显示对数刻度

我正在制作一个曝光计算器，就像 https://www.camexcalc.com 上的那样，但在 React.JS 中重新制作了该网站。我正在使用 Material UI 滑块。当我制作这个滑块时，它显示线性...

如何为MUI AutoComplete组件添加无限滚动功能？

我有一个具有分页功能的API端点。我需要实现一个 AutoComplete 组件（使用 MUI5 AutoComplete 组件）来获取下一页的数据并将结果与

React Material UI VITE - 主题问题 - createTheme_default 不是函数

在我们的前端 React - Material UI 应用程序中，我们目前遇到的问题是，有时当我们切换分支时，我们会收到错误：createTheme_default 不是浏览器中的函数

Material-UI 数据网格日期选择器

我正在使用 Material-UI 的 DataGrid 组件制作一个调度程序，到目前为止看起来很棒。我的设置方法如下： 从“react”导入 React, {useState, useEffect }; 导入 {DataGrid,

Flutter：如何使用 InkWell 在 GridTile 中的图像上制作波纹效果

我正在尝试使用 InkWell 在用户点击图块时在 GridTile 内的图像顶部获得波纹效果。 我相信图像本身掩盖了波纹，因为当我删除......

Flutter：如何创建持久（无限）SnackBar？

我想在 Flutter 应用程序中创建一个持久（无限）的 SnackBar——一个无限期保持可见并且不会自动消失的 SnackBar。 你能帮我...

带有嵌套数据的材质 UI 数据网格

如何在 React Material UI 数据网格上渲染嵌套 JSON 数据。在附加的沙箱中，我想从数据网格嵌套 JSON 数据网格上的 json 显示用户的电话号码

如何将 @tanstack/react-router Link 组件与 React MUI Link 组件结合起来？

我正在使用 Tanstack Router Link 组件在我的应用程序中导航（类型安全）。但对于 UI，我想依赖 React MUI Link 组件。 这是我目前使用两者结合的方法（

如何确保 TextField 最多接受 255 个字符并在超出时显示警告？

我希望这个来自 Macial UI 文本字段的 TextField 组件具有 我想要这个来自 Macial UI Text Field 的 TextField 组件 <TextField value={value} label='Ana iş Adımı' multiline onChange={onChange} placeholder=' ' error={Boolean(errors.definition)} aria-describedby='validation-basic-definition' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> 最大长度为 255 个字符。如果超过 255 个字符的限制，我希望在下面显示一条红色警告消息，如下图所示：pic，但我不想只包含 <TextField ... inputProps={{ maxLength: 255 }} /> 到文本字段，因为它不显示红色警告消息。它仅强制执行字符限制。我的整个页面是： import React, {useEffect, useState} from "react"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import Tooltip from "@mui/material/Tooltip"; import IconButton from "@mui/material/IconButton"; import Icon from "../../../@core/components/icon"; import {Controller, useForm} from "react-hook-form"; import restClient from "../../../rest/client"; import mappings from "../../../mappings/mapping"; import toast from "react-hot-toast"; import Card from "@mui/material/Card"; import CardHeader from "@mui/material/CardHeader"; import CardContent from "@mui/material/CardContent"; import FormControl from "@mui/material/FormControl"; import TextField from "@mui/material/TextField"; import FormHelperText from "@mui/material/FormHelperText"; import InputLabel from "@mui/material/InputLabel"; import Select from "@mui/material/Select"; import MenuItem from "@mui/material/MenuItem"; import Button from "@mui/material/Button"; import { DataGrid, gridPageCountSelector, GridPagination, GridToolbarContainer, GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter, useGridApiContext, useGridSelector } from "@mui/x-data-grid"; import DeleteDialog from "../../../views/components/company/DeleteDialog"; import MuiPagination from "@mui/material/Pagination"; import secureLocalStorage from "react-secure-storage"; const defaultValues = { id: '', definition: '', orderNo: '', companyRequest: null, }; function CustomToolbar() { return ( <GridToolbarContainer> <GridToolbarQuickFilter/> </GridToolbarContainer> ); } function Pagination({page, onPageChange, className}) { const apiRef = useGridApiContext(); const pageCount = useGridSelector(apiRef, gridPageCountSelector); return ( <MuiPagination color="warning" className={className} count={pageCount} page={page + 1} onChange={(event, newPage) => { onPageChange(event, newPage - 1); }} /> ); } function CustomPagination(props) { return <GridPagination ActionsComponent={Pagination} {...props} />; } const CompanyJobDescription = () => { const [companyJobDescriptionLList, setCompanyJobDescriptionList] = useState([]); const [selectedId, setSelectedId] = useState(); const [openDelete, setOpenDelete] = useState(false); const [isUpdateMode, setIsUpdateMode] = useState(false); const { control, handleSubmit, formState: { errors }, reset, setValue, watch: valueWatch } = useForm({ defaultValues, }); const columns = [ { flex: 0.01, minWidth: 100, headerName: 'S.N', field: 'orderNo', renderCell: (params) => ( <Typography variant="body2" sx={{ color: 'text.primary' }}> {params.row.orderNo} </Typography> ) }, { flex: 1, minWidth: 200, field: 'definition', headerName: 'Ana İş Adımı', renderCell: (params) => ( <Typography variant="body2" sx={{ color: 'text.primary', whiteSpace: 'pre-wrap', overflow: 'auto', maxHeight: '50px', pt: 1 }} > {params.row.definition} </Typography> ) }, { flex: 0.05, minWidth: 140, field: 'actions', headerName: 'İşlemler', renderCell: (params) => { const id = valueWatch("id"); return ( <Box sx={{ display: 'flex', alignItems: 'center' }}> <Tooltip title="Düzenle"> <IconButton size="small" color="warning" sx={{ mr: 0.5 }} onClick={() => updateJobDescription(params)} > <Icon icon="mi:edit" /> </IconButton> </Tooltip> <Tooltip title="Sil"> <IconButton size="small" color="error" onClick={() => showDeleteModal(params)} > <Icon icon="mdi:delete-outline" /> </IconButton> </Tooltip> {id === params.row.id && ( <Tooltip title='Güncellemeyi İptal Et'> <IconButton size='small' color="error" onClick={resetForm}> <Icon icon='material-symbols:cancel-outline' /> </IconButton> </Tooltip> )} </Box> ); } } ]; const handleConfirmDelete = () => { deleteCompanyJobDescription(selectedId); setOpenDelete(false); }; const updateJobDescription = params => { const { id, definition, orderNo } = params.row; setValue('id', id); setValue('orderNo', orderNo); setValue('definition', definition); setIsUpdateMode(true); // Güncelleme modunu etkinleştir }; const showDeleteModal = (params) => { setSelectedId(params.row.id); setOpenDelete(true); }; const deleteCompanyJobDescription = (selectedId) => { restClient.delete(mappings.companyJobDescription.deleteCompanyJob(selectedId)).then(() => { getCompanyJobDescription(); setOpenDelete(false); toast.success("Görev Tanımı başarıyla silindi."); }).catch(() => { toast.error("Görev Tanımı silinirken hata oluştu."); }); }; const getCompanyJobDescription = () => { const company = JSON.parse(secureLocalStorage.getItem("companyInfo")); restClient.get(mappings.companyJobDescription.getCompanyJobDescriptionByCompanyId(company?.id)).then(res => { setCompanyJobDescriptionList(res.data.data); }); }; useEffect(getCompanyJobDescription, []); const onSubmit = (companyJobDescription) => { companyJobDescription.companyRequest = JSON.parse(secureLocalStorage.getItem("companyInfo")); const isOrderNoUnique = !companyJobDescriptionLList.some( (item) => item.orderNo === parseInt(companyJobDescription.orderNo) && item.id !== companyJobDescription.id ); if (!isOrderNoUnique) { toast.error("Bu sıra numarası zaten mevcut. Lütfen farklı bir sıra numarası girin."); return; } restClient.post(mappings.companyJobDescription.addCompanyJobDescription(), companyJobDescription) .then(() => { toast.success("Görev Tanımı başarıyla kaydedildi."); getCompanyJobDescription(); resetForm(); }).catch((error) => { console.error("Görev Tanımı oluşturulurken bir hata oluştu: ", error); toast.error("Görev Tanımı oluşturulurken hata oluştu."); }); }; const resetForm = () => { reset(); setIsUpdateMode(false); // Güncelleme modunu kapat }; return ( <> <Card sx={{ mb: 2 }}> <CardHeader sx={{ mb: 0 }} title="Görev Tanımı Jenerik Maddeleri Ekle" avatar={ <IconButton> <Icon icon={isUpdateMode ? 'mi:edit' : 'mdi:plus'} /> </IconButton> } /> <CardContent> <Grid sx={{ pb: 5 }}> <form onSubmit={handleSubmit(onSubmit)}> <Grid container spacing={5}> <Grid item xs={12} sm={12}> <FormControl fullWidth> <Controller name='orderNo' control={control} rules={{ required: true }} render={({ field: { value, onChange } }) => ( <TextField value={value} label='Sıra Numarası' onChange={onChange} placeholder=' ' error={Boolean(errors.orderNo)} aria-describedby='validation-basic-orderNo' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> )} /> {errors.orderNo && ( <FormHelperText sx={{ color: 'error.main' }} id='validation-basic-orderNo'> Bu alan zorunlu. </FormHelperText> )} </FormControl> </Grid> <Grid item xs={12} sm={12}> <FormControl fullWidth> <Controller name='definition' control={control} rules={{ required: true }} render={({ field: { value, onChange } }) => ( <TextField value={value} label='Ana iş Adımı' multiline onChange={onChange} placeholder=' ' error={Boolean(errors.definition)} aria-describedby='validation-basic-definition' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> )} /> {errors.definition && ( <FormHelperText sx={{ color: 'error.main' }} id='validation-basic-definition'> Bu alan zorunlu. </FormHelperText> )} </FormControl> </Grid> <Grid item xs={12} sm={12} sx={{ display: 'flex' }}> <Button fullWidth size='large' type='submit' variant='contained'> {isUpdateMode ? "Güncelle" : "Kaydet"} </Button> </Grid> </Grid> </form> </Grid> <Box sx={{ height: 700 }}> <DataGrid columns={columns} rowsPerPageOptions={[7, 10, 25, 50]} rows={companyJobDescriptionLList} sortModel={[ { field: 'orderNo', sort: 'asc', }, ]} slots={{ toolbar: CustomToolbar, pagination: CustomPagination, }} pagination getRowHeight={() => "auto"} /> </Box> </CardContent> </Card> <DeleteDialog onConfirm={handleConfirmDelete} open={openDelete} setOpen={setOpenDelete} /> </> ); } export default CompanyJobDescription; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script> 我是 stackoverflow 的新用户。如果我在提问时犯了错误，我深表歉意。 你可以做类似的事情 ... const [text, setText] = useState(""); const [error, setError] = useState(false); const handleChange = (event) => { const value = event.target.value; if (value.length <= 255) { setText(value); setError(false); } else { setError(true); } }; ... return ( ... <TextField ... value={value} onChange={handleChange} error={error} /> {error && ( <Typography variant="caption" color="error"> Maximum character limit is 255 </Typography> )}

如何在幻灯片中使用自动完成功能？

我有一个 useAutocomplete ，我在 Slide MUI 组件中实现了它： 我有一个 useAutocomplete，我在 Slide MUI 组件中实现： <Slide in={isOpen} timeout={{ enter: 300, exit: 200 }} mountOnEnter unmountOnExit > <div {...getRootProps()}> <TextField variant="outlined" label="search" size="small" value={searchInput} autoFocus onChange={(e) => setSearchInput(e.target.value)} InputLabelProps={{ ...getInputLabelProps() }} inputProps={{ ...getInputProps() }} InputProps={{ endAdornment: ( <InputAdornment position="end"> <SearchIcon /> </InputAdornment> ), }} /> <List {...getListboxProps()}>{optionsList}</List> </div> </Slide> 当 isOpen（prop）为 false 时，我收到此错误： 找不到输入元素。当需要 HTMLInputElement 时，它被解析为 null。相反，useAutocomplete 需要一个输入元素。确保您已正确绑定 getInputProps 并保证正常的引用/效果解析顺序。* 如何解决此错误，同时保留幻灯片提供的动画？ 首先，请注意您正在使用的某些 API 已被弃用。参考这个 所以，这部分代码现在应该是，其中 slotProps 是 TextField 的 prop： slotProps={{ inputLabel: { ...getInputLabelProps() }, htmlInput: { ...getInputProps() }, input: { endAdornment: ( <InputAdornment position="end"> <SearchIcon /> </InputAdornment> ), }, }} 然后，我检查了错误并测试了渲染。原因可能是组件开始在服务器上渲染（例如，如果您正在使用服务器组件），因此引用存在边界问题。相反，您可能必须将组件移动到客户端文件并在未设置 SSR 的情况下导入它

使用 TextField 作为 MUI 自动完成的选项之一

在 React 应用程序中，我使用 MUI 自动完成字段作为可搜索下拉列表。我试图将其中一个选项设置为文本字段，用户可以在其中填写一些文本。 渲染这个 TextField 是

x-date-formatters 在“date-fns”包中缺少“./_lib/format/longFormatters”说明符[插件 vite:dep-pre-bundle]

我有一个表单，我正在尝试使用 React 和 Mui 设置 x-date-formatters 包。有人知道如何解决这个问题吗？ 错误是： “...

如何使用NextJS并行和槽与MUI（material-ui）的Tabs？

我们有 MUI 的选项卡组件，并且我们有插槽的并行路由。 我尝试创建这个目录结构。但无法正常工作。 重新加载会引发仪表板/精选错误 仪表板/显示没有...

如何从@tanstack/react-router Link组件中删除CSS？

我正在使用 React MUI List 组件和 tanstack router Link 组件 我正在使用 React MUI List 组件 和 tanstack router Link 组件 <List> <Link to="/customers/$customerID" params={{ customerID: 123 }}> <ListItemButton> <ListItemText primary="Customer 123" /> </ListItemButton> </Link> </List> 代码按预期工作，但 Link 组件覆盖了 MUI ListItemText 组件的 CSS。 如果没有 Link 组件，假数据会像这样渲染 使用链接组件，假数据会像这样呈现 将 style={{ textDecoration: "none", textDecorationColor: "currentColor" }} 添加到链接组件并没有修复它。 我创建了一个用于繁殖的小游乐场。你知道如何解决这个问题吗？ 你似乎在错误的地方提供了CSS，只需将CSS提供给标签而不是 style={{ textDecoration: 'none', color: 'inherit' }} 像这样重构你的代码 <List> <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }} // Inline style for Link > <ListItemButton> <ListItemText primary="Text" /> <ListItemText primary="Text" /> </ListItemButton> </Link> </List>