material-ui 相关问题

Material-UI 样式和 html / markdown

我们的应用程序是使用 Material-UI 库（带主题）构建的。作为此应用程序的一部分，我们将 markdown 解析为 html（标记库）。 如何将material-ui主题（Typography）应用到纯粹的...

使用样式组件在 Material-UI 中进行媒体查询

Material UI 有一组很好的内置媒体查询：https://material-ui.com/customization/breakpoints/#css-media-queries Material UI 还允许我们将 Styled-Components 与 Material UI 一起使用：h...

为什么我的 React Signals 对话框无法在此处打开？

我正在尝试使用信号控制 MUI 对话框，但即使使用 < p >，信号中的值也不会呈现。但是，信号的值在控制台中发生了变化。所以如果我点击...

如何防止按住手机上的按钮时选择附近的文本？

我有一个应用程序，用户需要按住按钮来录制音频。但是，当用户按住移动设备上的按钮时，浏览器会尝试选择附近的文本（因为用户按住...

如何在 Next.js 服务器组件中使用 Material-ui 风格的组件

我正在将 Next.js 版本 14 与应用程序路由器以及 Material-UI v5 一起使用。 每当我在服务器页面组件中渲染 Material-UI 组件时，它都工作得很好。当我

如何在 iframe 中使用 Material UI (mui) 5.0？

我正在尝试使用 React Portal 在 iframe 内渲染 MUI 组件。尽管它们是在 iframe 内渲染的，但它们会丢失所有 thMUI 组件，在 iframe 内渲染时也会丢失样式

自定义@mui TextField type=数字箭头

我正在使用 https://mui.com/material-ui/ 库并导入 TextField 组件。 我需要的是将它塑造成这样： 在此输入图像描述 问题是我无法： 总是

Mui 风格的组件未使用 React-hook-form 注册

如果我注册用户名和密码时没有使用 mui 风格的组件。有用 //这工作正常 如果我注册用户名和密码时没有使用 mui 风格的组件。它有效 //This works fine <TextField id="username" type="text" autoComplete="off" inputProps={{ 'data-testid': 'username' }} label={t('COMMON.USERNAME')} helperText={errors.username && t('LOGIN_PAGE.THIS_FIELD_IS_REQUIRED')} sx={{ width: '100%' }} {...register('username', { required: true })} error={!!errors.username || isLoginError} /> <TextField id="password" type="password" autoComplete="off" inputProps={{ 'data-testid': 'password' }} label={t('COMMON.PASSWORD')} helperText={errors.password && t('LOGIN_PAGE.THIS_FIELD_IS_REQUIRED')} sx={{ width: '100%' }} {...register('password', { required: true })} error={!!errors.password || isLoginError} /> 如果我尝试创建一个 mui 风格的组件并将 props 传递给它，这不会通过react-hook-form注册 //username component is not registered with react-hook-form //create styled component out of react component like this const StyledTextField = styled((props: TextFieldProps) => ( <TextField id="username" type="text" autoComplete="off" inputProps={{ 'data-testid': 'username' }} sx={{ width: '100%' }} {...props} /> ))(); // using it like this, <StyledTextField label={t('COMMON.USERNAME')} helperText={errors.username && t('LOGIN_PAGE.THIS_FIELD_IS_REQUIRED')} {...register('username', { required: true })} error={!!errors.username || isLoginError} /> <TextField id="password" type="password" autoComplete="off" inputProps={{ 'data-testid': 'password' }} label={t('COMMON.PASSWORD')} helperText={errors.password && t('LOGIN_PAGE.THIS_FIELD_IS_REQUIRED')} sx={{ width: '100%' }} {...register('password', { required: true })} error={!!errors.password || isLoginError} /> 不知道我在这里做错了什么...... 我认为这是因为您的样式组件没有转发引用，如果您检查 register 函数的返回值，您会注意到对输入的引用。 https://react-hook-form.com/docs/useform/register register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref }) 在样式组件中转发引用，或者使用正确的样式语法。如果你使用 Mui 风格，正确的语法应该是这样的： const StyledTextField = styled(TextField)({ //css here });

为什么我的代码在网格中没有垂直排列？

我正在使用 React 和 MaterialUI 进行开发。我遇到了一个奇怪的问题，元素无法垂直对齐。我平时都是做后端的，所以对前端几乎一无所知

按钮触发 MUI DataGrid 的 onRowClick，尽管 stopPropagation

我在 DataGrid 的一行中设置一个按钮来执行自己的操作。然而，尽管stopPropagation和preventDefault，它仍然会触发该行的行为。 您拥有一个功能齐全的电子...

如何通过react-hook-form使用Material UI Select？

我使用 Material UI 和 React Hook Form 在 React 中构建了一个表单。我正在尝试创建一个用作选择输入的自定义 TextField 元素。我希望它是一个不受控制的组件......

ReactJS 中的 Material UI 自动完成类别

我正在使用 MUI 自动完成和 Formik，我想将其分组。如果它没有 sub_accounts，那么它不应该有标题标签。像这样的东西：https://mui.com/material-ui/...

如何检索MUI数据网格当前页面显示的数据

有没有办法获取当前页面MUI Data Grid显示的数据？ 我的情况如下： 我有一个显示通知的数据网格，我想将未读的设置为已读......

容器内的 Material-ui 抽屉

如何在reactjs中的容器内设置material-ui抽屉？ 我将应用程序页面包装在最大宽度为 600px 的容器中。我想将抽屉设置为从该容器开始，而不是在正文页面中（

如何在同一页面上使用自定义颜色切换 2 张幻灯片？

我可以更改如何在同一页面上使用自定义颜色制作 2 个幻灯片切换？ 如何在同一页面上使用自定义颜色制作 2 个幻灯片切换？如何在同一页面上使用自定义颜色制作 2 个幻灯片切换...

React组件渲染但未挂载因此无法setState

我有一个名为 FillForm 的功能组件，它调用要在 FormFiller 函数中按顺序呈现的对象列表。这些组件正在正确渲染和显示

MUI Material-ui - 如何对 TextField 和 Select 进行分组？

在我的应用程序中，用户需要输入一个数量，可以是字节、KiB、GiB 或 MiB。 我正在使用 2 个 React MUI 组件： 用于输入数量的文本字段 a 选择以选择正确的数量...

MUI TablePagination 组件导致 Next.js 13 中出现水合错误

使用 MUI TablePagination 组件时，我在 Next.js 13 中遇到水合错误。 错误看起来像这样 错误：水合失败，因为初始 UI 与渲染的内容不匹配...

onClick 事件上总是得到错误的值

我创建一个表格来显示一些值 {列表版本 ？ listVersions.map(( 我创建一个表格来显示一些值 <TableContainer> <Table sx={{ width: "100%" }}> {listVersions ? listVersions.map((current_version, index) => { const isItemSelected = isSelected(index+ 1); const labelId = `enhanced-table-checkbox-${index}`; return ( <TableRow hover onClick={() => handleClick(index + 1, current_version, isItemSelected)} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} key={index + 1} selected={isItemSelected} sx={{ cursor: "pointer" }} > <TableCell padding="checkbox"> <Checkbox color="primary" checked={isItemSelected} inputProps={{ "aria-labelledby": labelId, }} /> </TableCell> <TableCell>{current_version}</TableCell> </TableRow> 我需要选择当前版本。 所以handleClick看起来像： const handleClick = (id: number, version: string, isSelected: boolean) => { console.log(version , isSelected); ...... } 正确的版本显示在控制台中，但其状态，无论是否选中，始终是相反的值。当我选择行时，值为 false，当我取消选择行时，值为 true。 选择行时预期值为 true。 我不明白哪里出了问题 handleClick函数，isSelected似乎是负责判断该行是否被选中的函数。您可以直接将选定的状态传递给 handleClick 函数，而不是依赖于 isSelected 函数。 <TableRow hover onClick={() => handleClick(index + 1, current_version, isItemSelected)} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} key={index + 1} selected={isItemSelected} sx={{ cursor: "pointer" }} > 修改您的 handleClick 函数以直接使用从 TableRow 组件传递的 isItemSelected 值 const handleClick = (id: number, version: string, isItemSelected: boolean) => { console.log(version, isItemSelected); // Other logic };

ReactJS 中的 Material UI 自动完成子选择

我正在使用 MUI 自动完成和 Formik，我想将其分组。如果它没有 sub_accounts，那么它不应该有标题标签。像这样的东西：https://mui.com/material-ui/...