react-material 相关问题


无法在 Material UI 日期选择器上显示错误和错误消息

我正在使用 React Material UI 我想在后端计算的某些条件下显示错误。 我使用了 Material UI-datepicker 但无法显示错误 从 'react' 导入 * as React; 导入


无法解决依赖关系:来自@material-ui/[email protected]的peer React@"^16.8.0 || ^17.0.0"

我使用创建了一个反应项目 npm 初始化 -y npm 安装 React React-dom 然后我尝试安装 Material UI npm 安装@material-ui/core 它得到错误 npm 错误!代码 ERESOLVE npm 错误!解决...


react-testing-library:无法关闭 MUI Select 的下拉菜单

我有一个 SelectExample.js 从“react”导入 React, { useState }; 从“@mui/material”导入{InputLabel、MenuItem、FormControl、Select、Typography };> 导出默认fu...


React Material 选项卡方向在响应式中发生变化?

如何更改响应式材质选项卡方向变化?我正在使用 React Material 版本 4 我需要桌面响应式的orientation=“horizontal”,它应该是orientation=“


如何用React Material UI实现多行标签

我正在使用 React js 来开发我的 Web 应用程序,并且我正在使用 React 材料设计来进行 UI 设计。下面是我引用的网址。 https://material-ui-next.com/ 我正在努力实现一些目标...


从 Material UI Modal 中删除边框

我正在尝试使用 React Material UI 模态,但当它聚焦时,我总是在模态周围看到黑色边框。当它失焦时我已经删除了边框,但是如果模态聚焦......


在 React 16 中使用 RTL 测试 Material UI Drawer 的关闭逃逸功能

我正在尝试测试 Material UI Drawer。当您按 Esc 键或单击抽屉外部时,它应该关闭。但它正在失败。 我正在使用反应测试库进行测试。我创建了一个


具有多个React版本和CSS隔离的模块联合

我有一个模块联合远程存储库,它是: 使用 React 17 构建 Material-ui 4 包括 jss 有来自第三方库的自己的全局 CSS,我无法编辑 我有多个主机...


类型“IntrinsicAttributes & RefAttributes<any>”上不存在属性“XXX”

我将编码作为一种爱好,并且正在使用 TypeScript 构建一个 React 网站。我找到了一个免费的 Material UI 模板,我正在尝试将其集成到现有代码中。模板是用


Angular Material v17:缺少“MatFormFieldAppearance”中的“遗产”

在 Angular Material v14 中,MatFormFieldAppearance 提供了传统、标准、填充和轮廓值。 类型 MatFormFieldAppearance = '旧版' | '标准' | '填充' | '大纲'; 然而,在 Angular


Angular Material 5 深色主题未应用于机身

我创建了一个“自定义”主题(使用 https://material.angular.io/guide/theming 上的主题文档,这非常糟糕),如下所示: @import '~@angular/material/theming'; @包括 mat-cor...


@types/material-ui 和官方的@mui/types 包有什么区别?

npm 包:@types/material-ui 和 @mui/types 我知道前者受到 Definely Typed 社区的支持,但如果存在官方类型包,为什么它首先存在呢?我已经


android 撰写轮播,如何在使用 HorizontalUncontainedCarousel 时应用英雄策略(居中)轮播

在material3指南中,他们提到了英雄策略(居中)轮播,并提供了使用视图(XML)的详细示例 https://github.com/material-components/material-components-android/blob/...


如何在 Angular Material 2 中构建自定义组件

是否有任何标准方法可以在 Angular Material 2 之上构建自己的组件或扩展现有组件。 之前我使用过 Sencha/ExtJS 框架,构建自己的框架非常简单


有没有办法使用角度材料拖放来调整大小

我正在使用 Angular 和 Material 创建一个 Web 应用程序,我希望能够拖放和调整我的部分的大小。有没有办法使用 Angular Material 拖放 CDK 来完成?


将 Angular Material 从 16 迁移到 17 时出现目录错误

我正在尝试运行 Angular Material 迁移工具以从 16 迁移到 17,但收到一条错误消息,指出目录必须是字符串。 JSON 显示它是错误的。这不是提示,a...


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

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


Angular Material 6 网格列表对齐项目并将内容对齐到 flex-start

我正在尝试使用 Angular Material 6 动态网格列表。与文档相关的示例将网格的内容放在每个图块的中心。请参阅此处的示例 我想要内容进去...


重新渲染次数过多。布局不稳定。 TextareaAutosize 限制渲染次数以防止无限循环

我有一个按以下方式定义的多行 TextField: 我有一个按以下方式定义的多行 TextField: <TextField id="outlined-multiline-flexible" label="Description" multiline rows={10} value={description} onChange={handleChangeDescription} /> 这是handleChangeDescription: function handleChangeDescription(event: { target: { value: SetStateAction<string> } }) { setDescription(event.target.value) } 我知道它基本上是正确的,因为我几乎直接从 MaterialUI 文档中获取它,但我不断收到相同的错误:“Material UI:重新渲染次数过多。布局不稳定。TextareaAutosize 限制渲染数量以防止无限循环”。 奇怪的是,这只发生在我渲染页面,然后从页面上单击,然后单击返回页面时。该错误不会出现在初始渲染中。我真的不知道我能做些什么来解决它。我已经尝试了this线程中的所有内容,但没有任何帮助,所以我真的很感激任何其他建议!! 我自己也遇到了这个问题,为可能遇到同样问题的其他人发帖。问题在于 React 的 TextAreaAutoSize 组件如何管理其状态。 要解决这个问题,您可以将 fullWidth 属性传递给 textField。


使用 date-fns 和 Angular Material 日期选择器配置区域设置时,日期会消失

我正在尝试在我的 Anuglar 18 应用程序中使用 Angular Material 日期选择器配置 date-fns。但是,当我尝试配置区域设置时,日期选择器中的所有日期都不会出现。如果我记得...


MatFormFieldModule / MatLegacyFormFieldModule 未导入 MatInputFieldModule 时发生冲突

我必须在客户端项目中使用 Material Legacy 模块。 现在,我使用 MatLegacyFormFieldModule 和 MatLegacyInputFieldModule 删除了所有出现的 MatFormFieldModule 和 MatInputFieldModule。


自定义角度组件未渲染

我正在尝试创建一个基于材质角度的自定义可重用组件 我有以下代码 dropdown.component.ts 从“@angular/material/select”导入{MatSelectModule}; 导入{


为什么 Jetpack Compose Material 3 Card 可组合项的内容需要 ColumnScope?

我正在使用 Jetpack Compose,最近注意到 androidx.compose.material3 包中的 Card 可组合项要求其内容在 ColumnScope 中提供。具体来说,


Material-UI DataGrid 隐藏特定单元格的标题分隔符

有没有办法隐藏特定(或所有)单元格的标题列分隔符? 这是我的列定义 const orderCols = [ { 字段:'DOCDATE', headerName:'Fecha',flex:1 ...


如何使用带有 Material UI 图标的样式化组件

我尝试使用覆盖“!”但这仍然不起作用,有没有办法设计它?我在网上到处查看都无济于事。 从“反应”导入反应; 从 'styled-


如何使用 Angular 服务创建 nx 库

我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此,我通常创建这样的 Angular 服务: 导入 { 管理组件 }


我无法打印onChange的值

从“react”导入React; 从“react-input-mask”导入InputMask; 从“./inputMask.module.scss”导入样式; 从“反应...


Angular Material 17 独立组件中没有 DateAdapter 的提供者

我有一个带有 Angular 17 应用程序的 nx 项目,并尝试使用带有材料 17.0.4 的 Angular 材料日期选择器。但我明白了 NullInjectorError:没有 DateAdapter 的提供者! 错误。组件...


Angular Material 浮动标签在悬停时消失或被切断

如果不需要的话,我不想禁用浮动标签,但它们对我来说表现不佳。当我将鼠标悬停在它们上方时,很多时候浮动标签会完全消失......


材质 UI 输入与只读视图的文本字段

我正在努力构建一个新的 Material UI 表单。我想知道是否有只读字段的首选组件。我正在比较输入和文本字段组件,但无法真正分辨出什么......


为什么BottomSheet的背景颜色与Flutter中Material 3中设置的颜色不一样?

我正在使用材质 3 并打开 BottomSheet,如下所示: 显示ModalBottomSheet( 上下文:上下文, 背景颜色:颜色.白色, ... 然而,背景并不是 100% 白色 - 它看起来像......


如何在 Material-ui 表中添加垂直列分隔线

我创建了一个给定高度的桌子(比如说70vh)。我想要一个垂直的列分隔线来覆盖桌子的整个高度。我可以使用 TableCell 的 CSS 添加它。但我想要垂直列分割...


如何在 Material Design 3 中使用自定义颜色?

昨天我将我的应用程序从 MD2 升级到 MD3,一切正常。但我还是不太明白MD3中的自定义颜色。 问题 我什么时候应该使用自定义颜色?真正的我们是什么...


如何在材料UI日期选择器反应中仅获取日期?

我使用 Material-UI 选择器库来获取日期 我只想知道日期 像这样 17/07/2021 但我得到了这样的日期和时间 2021 年 7 月 17 日星期六 12:21:00 const [获取日期,


Material Ui DatePicker 使用键盘输入时总是得到无效日期

我试图将 mui-x/datepicker 与佛教年份一起使用,使用 dayjs 作为适配器,当我使用日历弹出窗口作为输入时,它工作正常,但是当我使用键盘输入日期并更改


如何在 Material ui 滑块中的标签悬停时获取工具提示

我正在尝试创建一个滑块测验,我想要的是在滑块上的标签悬停时出现工具提示 现在,当我将鼠标悬停在拇指上及其鼠标位置上时,我可以看到...


无法在react-三纤维中导入dat.gui

对于使用react- Three-Fiber制作的项目,我导入了以下库: 从 '三' 导入 * 作为三; 从“react”导入 React, { Suspense, useState }; 导入 { 画布,useLoader }


为什么我导入 React 时服务器返回 MIME 类型为“text/html”?

这是我的js: 从'./node_modules/react'导入React; 从'./node_modules/react-dom'导入ReactDOM; 让 thePage = React.createElement( '主要的', 无效的, '哈哈' ); ReactDOM.render(thePage,


外观标准属性在 Angular 15 中不起作用

Angular 15 中的外观=“标准”属性不再起作用。除标准外,所有外观均运行良好。 为什么这不再起作用了? 结果: 需要: Angular 15 中的 appearance="standard" 属性不再起作用。除了standard之外,所有外观都运行良好。 为什么这不再起作用? 结果: 需要: <mat-form-field class="form-field" Appearance="Standard"> <input matInput formControlName="email" matInput placeholder="email" name="email" type="text" required> </mat-form-field> 您正在使用的属性的 API 从 v14 更改为 v15 。具体来说,删除了 legacy 和 standard 外观。 导入路径 变更摘要 ... ... @angular/material/form-field 样式更改、删除一些外观、API 更改 ... ... API 更改的原因在博客中进行了解释: 我们很高兴地宣布基于 Web 材料设计组件 (MDC) 的 Angular 材料组件重构现已完成!这一更改使 Angular 能够更接近 Material Design 规范,重用 Material Design 团队开发的原语代码,并使我们能够在最终确定样式标记后采用 Material 3。 从 v14 文档来看,Angular 14 中的有效值是: type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline'; 从 v15 文档来看,Angular 15 中的有效值是: type MatFormFieldAppearance = 'fill' | 'outline'; 如果您想继续使用appearance="standard",您可以尝试导入MatLegacyFormFieldModule而不是MatFormFieldModule。该博客提到,只要您不同时导入两者,它们目前是可以互换的。这是为了让您能够按照自己的节奏升级各个模块(包括您自己的模块和 Angular Material)。 每个新组件的旧实现现已弃用,但仍可通过“旧版”导入使用。例如,您可以通过导入旧按钮模块来导入旧的 mat-button 实现。 import {MatLegacyButtonModule} from '@angular/material/legacy-button'; 访问迁移指南了解更多信息。 在 Angular 15 中,不鼓励使用样式来定制材质库。但是,对于这么小的要求,您可以使用: .mat-mdc-form-field-focus-overlay { background-color: white!important; } .mdc-text-field--filled:not(.mdc-text-field--disabled) { background-color: white!important; }


尽管已安装,但找不到模块“@tanstack/react-table”

我正在开发一个 TypeScript React 项目,我正在尝试从 columns.tsx 文件中的 @tanstack/react-table 导入 ColumnDef。 从“@tanstack/react-table”导入{ColumnDef}; 出口...


create-react-app的内容没有推送到github

我将 Go 和 React 代码推送到了 github。 Go代码已成功提交,但React代码未成功提交。 React 内容是由 create-react-app 创建的。 文章 ├ 应用程序接口 │ └ main.go └ 客户 └ 反应


创建新的 React 应用程序时遇到麻烦

当我尝试创建一个新的 React 应用程序时,我收到以下错误消息, 安装软件包。这可能需要几分钟。安装中 React、react-dom 和带有 cra-temp 的 React-scripts...


在React版本18中使用react-facebook-login

我希望将react-facebook-login库与React版本18一起使用,但我无法安装该包。 npm 在控制台上抛出错误? 该库是否支持 Reac 18 版本...


如何在 EAS 构建中使用 React Native Reanimated?

我按照react-native-reanimated文档的安装说明创建了两次相同的应用程序https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/ge...


React-select:虚拟化选项列表

在最新版本的react-select(3.1.0)中虚拟化选项列表的预期方式是什么? 有react-virtualized-select,但不再支持。谢谢。


找不到模块“react”React Native

我最近开始学习React Native。我正在遵循此在线教程并使用 Expo 框架。 https://www.youtube.com/watch?v=sm5Y7Vtuihg 但是,如果我尝试 ru...


升级到 React 18 后 React App 未渲染

`我的 React 应用程序运行良好,但升级到 React 18、mui v5 和 redux v5 后,它没有渲染任何内容。 在终端中,我得到: webpack 编译成功 但在 chrome 控制台中...


反应问题,当我将标头组件添加到我的主页组件时,没有任何内容加载

从“react”导入React; 从 '@chakra-ui/react' 导入 { ChakraProvider, CSSReset }; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Routes }; 从 './nav' 导入导航; 导入首页


元素未显示在 React Native 上

电流输出: 预期输出: 当前代码实施: 从“反应”导入反应 从 'react-native-svg-charts' 导入 { LineChart, XAxis, YAxis } 从 'react-native' 导入 { View, Text }


如何将下拉面板放置在 mat-select 文本框的正下方

我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个垫选择下拉菜单,是这样写的...... 我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个mat-select下拉菜单,是这样写的... <mat-select value="5" panelClass="custom-panel"> <mat-option value="5">5</mat-option> <mat-option value="10">10</mat-option> <mat-option value="20">20</mat-option> </mat-select> 在此我应用了panelClass及其CSS代码如下... .custom-panel { top: calc(100% + 10px) !important; } 而且仍然如下。下拉列表与其文本框重叠 这是未选中时的下拉菜单 这是选择后的下拉菜单 如何将面板放置在选择文本框的正下方... 您可以使用下面的CSS来做到这一点! 我们使用csstransform将面板移动到底部! .custom-panel { transform: translateY(25px) !important; } 堆栈闪电战


© www.soinside.com 2019 - 2024. All rights reserved.