metro-ui-css 相关问题


间距和宽度表CSS

我需要这方面的帮助。我不太擅长 CSS/布局或 UI 设计。我只是想知道怎么做这个无法弄清楚,为什么它会在这些表上做这些事情: 在红框里,我的


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

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


创建切换/开关来显示/隐藏div

我希望能够单击切换 UI 元素(复选框),并让它显示/隐藏一个或另一个 div。 如果只是为了简单起见,使用 CSS 来完成此操作,那就太棒了;但我明白如果javas...


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

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


错误错误:需要未知模块“未定义”

当我尝试使用 @react-navigation/bottom-tabs 时,出现以下错误: 错误:需要未知模块“未定义”。如果您确定该模块存在,请尝试重新启动 Metro。你可能...


当我使用 Expo 启动 React Native 应用程序时出现“无与伦比的路线”

我是 React Native 新手,我只是想用 Expo 启动我的 React Native 应用程序,当我刚刚通过 Metro Bundler 访问时,立即说:“不匹配的路线 - 找不到页面”...


Material UI OutlinedInput 标签不可见

我们正在使用 Material UI 中的 OutlinedInput,但文本标签不会呈现。如何解决这个问题? 从 '@material-ui/core' 导入 { Grid, OutlinedInput }; 我们正在使用 Material UI 中的 OutlinedInput,但文本标签不会渲染。如何解决这个问题? import { Grid, OutlinedInput } from '@material-ui/core'; <Grid container> <Grid item xs={12}> <OutlinedInput label="invisible label" placeholder="HELLO, STACKOVERFLOW!" value={value} onChange={(e) => handleValueChange(e.target.value)} fullWidth /> </Grid> </Grid> 渲染的是一个空白区域(左上角),而不是预期的“不可见标签”文本: 就像 @Daniel L 提到的,你必须在 InputLabel 组件中使用 FormControl 组件,但除了他的答案之外 - 我还必须在我的 label 组件上添加 OutlinedInput 属性,以便轮廓输入不会与我的标签重叠。 不带label属性的代码: <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined"> <InputLabel htmlFor='display-name'>Display Name</InputLabel> <OutlinedInput id="display-name" value={displayName} onChange={(e) => handleInputChange(e)} aria-describedby="base-name-helper-text" inputProps={{ 'aria-label': 'weight', }} /> </FormControl> 带有标签属性的代码: <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined"> <InputLabel htmlFor='display-name'>Display Name</InputLabel> <OutlinedInput id="display-name" value={displayName} label='Display Name' onChange={(e) => handleInputChange(e)} aria-describedby="base-name-helper-text" inputProps={{ 'aria-label': 'weight', }} /> </FormControl> 对此问题的快速回答基本上是将组件包装在 FormControl 下,并在 InputLabel 组件顶部添加 OutlinedInput。 根据您的代码,它应该如下所示: <Grid container> <Grid item xs={12}> <FormControl> <InputLabel htmlFor="outlined-adornment">Some text</InputLabel> <OutlinedInput id="outlined-adornment" placeholder="HELLO, STACKOVERFLOW!" value={value} onChange={(e) => handleValueChange(e.target.value)} fullWidth /> </FormControl> </Grid> </Grid> 我认为这个组件不适合单独使用。在 MUI 文档中,它主要用作其他组件的增强,例如 TextField <TextField id="outlined-basic" label="Outlined" variant="outlined" /> 如果您检查开发工具中的样式,看起来 CSS 属性 visibility: hidden 导致了此问题。事实上,如果您删除该样式,您将看到该标签有效。 但是,如果您已经使用此组件构建了大部分应用程序并且需要显示该标签,只需使用 MUI 的样式解决方案(例如 makeStyles)覆盖它即可。另外,使用 notched prop 为其分配空间 const useStyles = makeStyles({ customInputLabel: { "& legend": { visibility: "visible" } } }); export default function App() { const classes = useStyles(); return ( <div className="App"> <Grid container> <Grid item xs={12}> <OutlinedInput classes={{ notchedOutline: classes.customInputLabel }} label="visible label" placeholder="HELLO, STACKOVERFLOW!" fullWidth notched /> </Grid> </Grid> </div> ); } 我遇到了同样的问题,我将 OutlinedInput 包装到 FormControl 元素中,并附加 InputLabe 组件作为标签,这解决了我的问题。 要点: 方向:“ltr”确保标签文本对于从左到右的语言正确对齐。 &.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Mui-focused) 等规则可让您定位不同状态下的标签。 确保应用 ThemeProvider 来包装您的应用程序或特定组件以应用这些样式。 const const theme = createTheme({ MuiInputLabel:{ defaultProps:{}, styleOverrides:{ root:{ direction:"ltr", width:"100%", textAlign:"end", fontSize:20, "&.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Muifocused)":{color:'pink'}, "&.Mui-focused":{left:30,top:-10}, "&.MuiFormLabel-filled:not(.Mui-focused)":{left:30, top:-6} }, }, },


Angular 17 中的 NG 块 UI

我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗? 提前致谢 我使用 npm i ng-


React、React Router、Joy UI:如何禁用导航离开和返回后重新出现的小吃栏?

我有一个虚拟的工作板 Web 应用程序,它使用 React 和 Joy UI 作为前端和 UI。我使用 Joy UI 的 Snackbar 组件在用户执行某些操作后临时弹出一条消息(


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

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


如何使用 UI .NET MAUI 等弹出控件获得响应式布局

我有这样的 UI 设计,其中左侧有一个弹出/停靠布局用于设置列表,然后在右侧显示所选设置的内容。 在桌面上,我希望 UI ...


在 Open Web UI 中启用 Searxng 作为 Web 搜索引擎时出错

我想在我的 Open WebUI(以前称为 Ollama Web UI)中启用 seachxng - 元搜索引擎。 我已经编写了 docker compose 文件,如下所示,但问题是,当我打开 Open Web UI 并选择 '


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

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


无法解决依赖关系:来自@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 错误!解决...


我无法测试 Android 可组合 UI 出现“FINGERPRINT 不得为空”错误

我正在尝试写下我的可组合项的 UI 测试用例,即 包 com.lbg.project.presentation.ui.view 导入导航屏幕 导入 android.annotation.SuppressLint 导入 android.widget...


Shopify结帐UI如何检索所选shippingOption的DeliveryMethodDefinition id

我正在 Shopify 的结帐扩展 UI 上开发一个应用程序,我想使用目标“purchase.checkout.shipping-option-item.render-after”在 ShippingOptions 下显示一个横幅,在此 Ba...


Next.js 14 个 tailwind css 类不起作用

我在新项目中将 Tailwind CSS 与 Next.js 14 一起使用,但是当我在 page.tsx 文件中使用 Tailwind CSS 类时,它不起作用。我尝试更改 tailwind.config.ts 和 tailwind.config.js acco...


CSS 盒子模型的元素是什么?

CSS 盒子模型的元素是什么? 给我与问题相关的答案... 区分 CSS3 和 CSS2。 CSS3和CSS2的主要区别在于CSS划分了不同的se...


如何在 Tailwinds CSS 中创建分组按钮?

我正在尝试使用 Tailwind CSS 创建此输入布局,但我似乎没有发现 Tailwind CSS 默认支持此功能。 我该怎么做? 预先感谢您。


CSS 中的滚动条问题

/* 自定义 CSS =================================================== */ body::-webkit-滚动条 { 宽度:10px; } body::-webkit-scrollbar-track { 框阴影:插入 0 0 6px rgba(0, 0, 0, 0.3); }


模拟撰写 UI 上的用户交互

我试图了解如何测试用 Jetpack Compose 编写的 Android UI。切换到 Compose 时我的假设是我能够启动应用程序并模拟用户交互,例如......


机器上未出现 Kafka UI

我是 Kafka 和设置 Kafka UI 的新手,尽管我在最后的 docker 和 docker-compose 上设置了先决条件。 我最后有一个 3 节点 Kafka 集群设置。 下面是 docker-compose...


CSS 网格自定义布局

我正在尝试构建一个 CSS 网格 我不想在 item2 和 item3 之间有空间,并且希望这些项目在容器顶部对齐。 是否可以仅使用 CSS 而不修改...


在JS中解析JSON字符串[已关闭]

在JS文件中我有: {html: '测试代码 HTML', css: '测试代码 CSS'} 我如何解析它以获得 html 和 css 的值? 这是我尝试过的: const json = JSON.parse(数据); 反对...


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

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


如何使用streamlit和networkx创建UI来创建图形?

嗨,我想创建一个 UI 来管理带有streamlit和plotly的图形的创建。 我认为一种方法是创建按钮,例如“添加节点”、“删除节点”、“创建...


使用 :host ::ng-deep 设置 CSS 角色到角度组件 CSS 不起作用?

尝试使用以下方法设置角度组件的 CSS prop :host ::ng-deep .p-dropdown-panel { 变换原点:中心底部!重要; 顶部:-119px!重要; 左:0!重要; } ...


Vite 如何处理删除内置 .css 文件中的 .css 嵌套?

我一直在使用 Vite,并注意到由于删除了嵌套,构建的 .css 文件与原始源有所不同。具体来说,Vite 似乎压平或删除了


使用 JSON 时强制使用浮点值

我遇到一个问题,我的后端将包含浮点数(例如 10.0、20.0)的 JSON 数据发送到 UI 端。但是,在 UI 中收到这些数字并将其记录到控制台后...


从 Material UI Modal 中删除边框

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


无法在 AWS datalake/glue UI 中查看表

显示已创建表格的图像。 (爬虫快照) 即使爬网程序日志指出 - 已创建 2 个表,也无法在 AWS datalake/glue UI 中的数据库选项卡下查看表。 2020-09-...


仅当超过一定高度时才可调整大小

考虑以下 HTML+CSS 中可调整大小的 div: Lorem ipsum dolor sat amet.... /* CSS */ .mydiv { 高度:200px; 溢出-y:...


React、Mantine、CSS 模块无法正确加载

我正在使用 TypeScript 和 Mantine 开发一个 React 项目。我正在使用 CSS 模块来设置组件的样式。然而,在看似随机的时间,CSS 停止加载(据我从 Dev 观察到......


React Radix UI ScrollArea 全高

我正在为我的 Web 应用程序使用 Radix UI,我想制作一个滚动区域来填充屏幕的剩余空间并允许滚动。我尝试将滚动区域的高度设置为 100% 等,但是


更改每个案例的 UI 测试区域

我正在使用 swift-snapshot-testing 库进行快照测试。对我来说,使用不同的本地化进行所有测试以在文本更改时检查所有 UI 非常重要。 例如,t...


Apache Spark Structured Streaming 中 Spark UI 上的查询和阶段卡住了

我在 EMR 集群 (6.14) 上使用 Apache Spark Structured Streaming (3.1.2)。 Spark 结构化流将数据从 Apache Kafka 流式传输到 Delta Lake 表。当我打开 Spark UI 时,我看到以下内容


ASP.NET Core MVC jQuery UI

我对 C# 中的 ASP.NET Core MVC 非常陌生。我在水平排列的窗口中有 2 个数据网格或数据表。我在两个网格之间排列了一些按钮。 如何创建如下所示的 UI?拜...


如何使用 JavaScript 变量调整 CSS 属性?

我的问题: 大家好。我只是有一个关于使用 JavaScript 更改 CSS 属性的问题。我想使用我在 JavaScript 中编写的方程式来更改 CSS 属性的值。 我的目标是...


Safari 不显示/渲染图像的 css

我的 GitHub 页面网站上有一个个人资料图片,它使用一些 CSS 使其看起来很酷。图像在 chrome 或 Firefox 中显示完美,但在 safari 中似乎忽略了图像的所有 css...


自定义和更改pdftron-Flutter的默认UI

我的问题是 pdftron 是否使 Flutter 开发人员能够更改 ui 并添加一些按钮? 举个例子,我想以编程方式滑动pdf页面。 我找不到任何功能可以帮助...


docker-compose traefik 与 PathRegexp 的问题

我正在尝试做的事情: 我有一个 docker-compose 文件,其中包含 4 个容器 traefik、UI、API 和 DB。 我想使用 traefik 将容器 UI 和 API 重定向到端口 80,但位于不同的 url 路径上。 ...


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

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


如何在 Flutter 中创建此 Ui

你好,我是 flutter 新手,我想实现这个特定的 UI。从用户界面我可以看到 - 顶部有一个自定义搜索栏,我不知道它是否是应用程序栏。 它有一个 SizedBox 或一些......


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

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


如何使用CSS创建带有曲线的自定义按钮

我正在尝试使用CSS实现一个自定义样式按钮,如下图所示。 我在我的 css 文件中尝试了这个,并且能够实现更接近所需设计的效果: .casinoButton {


Visual Studio git UI 不显示新的远程分支

Visual studio git UI 不显示新的远程分支。我必须删除该存储库并再次克隆该存储库才能查看新分支。单击刷新图标没有帮助。有什么办法可以刷新吗...


Unity UI 球图像与父矩形图像向左/右弹跳

我正在尝试制作一种米,其中有一个球图像,它是矩形图像的子图像,我希望它来回弹跳。这就是统一 UI 的全部内容。父矩形的宽度可以...


css 选择器:div 内第一段的第一个字母

曾几何时.. 一个美丽的公主.. 我如何选择(在我的CSS中)这里面第一段的第一个字母...


为什么每次按下 Ctrl + F5 时 Angular 都会调用 SCSS 文件?

我在使用 Angular 时遇到问题,当我按 Ctrl + F5 时,CSS 文件会重新加载,这会破坏我的布局,直到 CSS 文件加载完成。 F5没有问题,因为CSS文件是缓存的...


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

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


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