问题标签 [react-material]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
3521 浏览

reactjs - 哪些 React Material-UI 组件为我的页面添加了间距(如 Bootstrap 中的行类)?

我已经使用 React 和Material-UI for React 创建了一个项目。

来自 Bootstrap 背景,我注意到这些组件中没有一个在其组件周围有任何边距。

在 Bootstrap 中,我可以像这样添加间距:

但我不知道使用什么组件来创建这样的间距。

我目前正在使用自定义类来创建某种间距,但感觉不正确。

应用程序.tsx:

应用程序.css:

例如,使用现有组件在这些元素之间添加间距:

在此处输入图像描述

我愿意接受建议。

0 投票
1 回答
1141 浏览

reactjs - React MUI - 选定选项卡的覆盖样式不起作用

我有一个用React mui v3构建的项目。在我的组件中,我想通过将边框底部设置为与其他选项卡不同的值来覆盖所选选项卡的样式。我首先尝试在组件级别通过使用新样式设置类和选定属性来做到这一点:

并在选项卡上使用它:

但是,在控制台中,我可以看到选定的类被选项卡选定的样式覆盖。我也尝试在主题级别上做到这一点,方法是设置MuiTab为:

这是示例。但是,这不起作用,您如何覆盖所选选项卡的样式?

0 投票
0 回答
198 浏览

fonts - 使用 Material-UI 的自定义字体系列

我有一个启动并运行的 Material-UI React 应用程序,我正在尝试向应用程序添加新字体,但遇到了一些问题。

按照这里的教程https://material-ui.com/customization/typography/,这就是主题文件的样子。

在应用程序的任何地方,字体都回落到Arial。为了让字体`NeoSansPro 与我的应用程序一起工作,我是否缺少一些东西?

0 投票
0 回答
69 浏览

reactjs - React - jss 嵌套的类似 Sass 的样式不起作用

我有一个应用程序,我使用Material-UI v.3 作为 UI 框架。我有一个默认状态label,我想在将鼠标悬停在父元素上时显示。buttondisplay: none

我在这里制作了相关部分的简单代码框。jsx 代码如下所示:

它的样式是这样的:

为什么这不起作用,我在这里做错了什么?

0 投票
0 回答
1193 浏览

material-ui - (React Material-Table):启用“可编辑”但无法设置 isEditable 和 isDeletable

我的 React 程序中有一段代码,如下所示。但是,isEditable字段isDeletable根本不起作用。我该怎么做才能在此处禁用某些操作?

----更新实际代码----

索引.html

index.js

上述代码的显示结果

0 投票
0 回答
156 浏览

css - 带指针的材质 ui 弹出窗口

如何创建类似于带有@Material-ui 的图像的弹出窗口?

https://material-ui.com/

我尝试使用 Popover。但是波普尔没有指针。

在此处输入图像描述

0 投票
2 回答
3448 浏览

javascript - Material UI – 全局复选框焦点样式(非本地)

尝试使用 Material-UI (react) 在全局级别上更改复选框的样式。

目前只有默认和悬停样式有效:

我正在尝试做的,但不工作:

0 投票
1 回答
488 浏览

css - 有没有办法不在 SCSS 中使用 !important 这么多(反应 + 材料)

我正在使用 Material UI 在 React 中处理 Select 组件。该项目使用在组件的脚本文件中导入的外部 SCSS 表。

我找不到另一种方法来重新设置组件的 CSS 样式,而是使用通用材质 UI 类。但是,最后似乎我不得不一直使用 !important 来覆盖属性。

.js 看起来像这样:

我只能在我自己分配的 className 'select-row-items' 中直接设置组件的样式。对于 MenuItems,我必须在每个值旁边使用泛型类和 !important 以便它可以工作。

关于如何改进 CSS 的任何想法?

我的 CSS 看起来像这样:

0 投票
2 回答
776 浏览

reactjs - React-mdl Error: Invariant failed: You should not use outside a该网站没有被路由

main.js

导航.js

错误:不变量失败:您不应在不变量之外使用 D:/pandemic/pandemicmateria/kupsmaterial/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:11(匿名函数) D:/pandemic/pandemicmateria/modules /Link.js:84 如果我在 main.js 中使用 Router 标记而不是 Switch,并且如果我在 nav.js 中将导航标记与 Router 标记括起来,则我正在使用 react-mdl 进行 UI 反应,这意味着我没有收到任何错误但我没有得到输出......我的意思是页面没有相对于链接进行路由

0 投票
1 回答
955 浏览

reactjs - 将值更改为反应选择菜单项不会填充到反应材料-ui中

以下是反应选择菜单项的代码框的 URL。

反应选择菜单项 这里我用 div 包装菜单项并更改选择下拉列表的值,但值不会在更改时填充到选择下拉列表中。如何为 onChange 事件提供运行时值以选择下拉菜单。

有人可以让我知道这个想法的解决方案吗?

谢谢