问题标签 [makestyles]

所以我在一个反应​​项目中使用 next@material-ui 。问题是当将我的makeStyle钩子导入导航栏时，它会破坏我在应用程序其余部分上的 CSS。这是我的项目结构：

索引.js

应用程序.js

导航栏.jsx

它打破了我所有的css ex：

EG brefore 进口

EG导入后

导航栏样式.js

你们可以看到它把所有东西都挤在一起了，我该如何解决这个问题？是我如何构建我的项目的问题吗？我不明白。非常感谢你们的时间！

在这里输入图片描述我实现了material ui Modal组件之后，当App运行结束时返回部分的Modal标签在浏览器中无限调用并开始消耗内存。我认为 Modal 组件是无限创建的。请帮忙。错误请看帖子。由于一些错误图片没有上传这个问题。 https://imgur.com/gallery/MwStlKi

这是我的进口

这是我的主要功能

材质 UI 模态代码

MakeStyles 钩子

分配给对象。复制自 Material UI 网站

这个<Modal被无限调用

意图：

• 我想将不同的颜色传递给我的组件，我们需要通过它传递给fillsvg（在 SVG 的内部）；
• 这种填充也可以通过 boxShadow inset 来实现......但如果作为道具传递也不起作用

问题：

• fill如果您在其中放置一个值，则 SVG的内部效果很好（在我放置的下面的代码中取消注释第 35 行lightblue）

fill: 'lightblue'

• 不适用于fill传递的道具颜色...请注意，笔触，阴影，所有其他CSS似乎都可以正常工作...只有填充不起作用

'boxShadow' 的行为相同......下面代码中的详细信息也

重现此问题的示例代码：https ://stackblitz.com/edit/react-mui-2ybcce?file=svg.js

如何在单击时添加/删除类名以更改某些组件的样式？

• display: none;当我点击它和它旁边的所有组件时，我想旋转右边的箭头。

• 我还想在遇到移动断点时添加做同样的事情

你能帮我用 React 的 Material ui 吗？下面是我的问题

如果我这样做import makeStyles from '@material-ui/core/styles'了，在加载应用程序时它会抛出一个警告说......

但是当我这样做时import makeStyles from '@material-ui/styles'，它说...

我需要做什么？

我想在组件上应用field该类。TextField但边距不适用。我的代码如下：

我正在开发一个需要以下 CSS 代码的项目。

有没有办法使用 Material-UI 实现上述样式makeStyles而不单独使用前后选择器？

例如，如果您为一个组件（例如 TableRow）创建了一个 makeStyles 变量，并且该组件被父组件（Table）多次调用，则每个 TableRow 都会获得像“.mui-make-styles-column244”和“.mui-make-styles-column244”这样的类名。 mui-make-styles-column331”。

是否有一个原因？

无法判断这个数字方案是否是一种优化，或者它是否表明我应该优化我的风格组织方式。

看来 Heroku 部署正在删除我对 MUI makeStyles 文档的所有调用，并随后破坏了我的应用程序的大量外观。在我回去做我所有的造型之前寻找任何智慧（测试它 - 这确实有效）。

在我的本地主机视图上，一切看起来都很好。

差异的示例屏幕截图（忽略用户名差异） -

这是从我的 styles.jsx 中截取的一段（我将其截断以使这段代码的长度合理，但还有很多）：

...在我拥有的每个组件中：

import useStyles from "../components/styles/styles";

...和：

const classes = useStyles();

...而且，它再次在我的本地主机上运行良好。

当我推送到 Heroku 时，我的终端中没有与此相关的错误。

我将一件从调用className={classes.CLASSNAMEHERE}改为内联样式style={{style: "style"}}并修复它。

我希望这总结了这个问题。如果我没有完全按照预期完成这篇文章，请原谅我 - 我是相当新的。我希望这是一个常见问题，但我对此无能为力！我发现的唯一一件事是建议我在--save我的 MUI 安装中添加一个，但这并没有起到作用。

提前非常感谢大家！

我有一个 MUI 对话框，由于它是由用户过滤的列表，因此它的高度会有所不同。它最终很烦人，因为对话框在屏幕“跳跃”时试图保持它的中心位置，因为它的增长和缩小。这是它的样子：

对于这个特定问题，一个简单的解决方案是简单地alignItems从dialogPaperclasses 属性中取消设置。像这样的东西：

但是，这会导致它在屏幕上失去其居中位置，而我仍然需要它居中（参考带有完整列表的对话框，没有任何内容被过滤）。我希望它的起点与未更改的对话框相同，适用于所有适用的屏幕尺寸（宽度超过 600 像素）

我怎么能做到这一点？

我尝试过使用类的定位和top属性pivottedDialog，但它会根据屏幕大小而变化。这需要响应并集中在宽度超过 600 像素的所有屏幕尺寸上。

我用两个对话框制作了一个示例应用程序，可以在这里玩：https ://codesandbox.io/s/crazy-tesla-emc8m?file=/src/App.js