问题标签 [css-in-js]

有什么方法可以覆盖 Material UI 组件的样式，而不必使用创建一个全新的组件withStyles()？

例如，假设我正在渲染以下内容，而我只想更改“删除”标签的颜色：

为此，我通常必须：

• 创建一个返回的新样式函数{ color: "maroon" }。
• 创建一个新组件以呈现“删除”按钮。
• 包装我的新组件withStyles(newStylesFn)(MyComponent)。

但我不想做所有这些。有什么办法可以避免吗？

更新：

我知道的一种方法是传递一个 CSS className。我一直在寻找除此之外的东西，因为在这种情况下它甚至无法覆盖嵌套元素。

我真正想做的只是 pass style={{ color: "maroon" }}，但这只会改变图标的​​颜色，而不是实际的标签文本......

好奇是否有人对不会破坏浏览器的 DevTools 功能的开发工作流程有任何建议，以便 UX 工程师轻松修改、操作和理解 CSS。我了解 CSS 封装对于 React 开发人员来说是多么棒，但我发现许多实现在能够为开发团队系统地修改和强制执行样式系统时完全是垃圾箱之火，仅仅是因为查看 CSS 的工具是如此混淆并且将样式与元素匹配的面包屑路径被删除 10 次。显然，这些框架在没有任何浏览器支持的情况下开发自己的系统是一个问题，就像未来技术的创可贴一样。

我找到的最好的解决方案是 ShadowDOM，我也希望并期待它成为未来的原生标准。我没有找到 Chrome 插件来帮助解决这个问题的结果，但什么也没找到。这是一个简单的示例，您可以看到 CSS 很容易找到和理解——但使用它仍然有点挑战，因为它从根本上隔离在 DOM 中并且很难分辨样式的范围。 http://react-shadow.herokuapp.com/

我研究了 JSS 和许多其他帮助程序构建。我目前正在尝试在我们的构建中取消实现 Styled-Components，因为它似乎是所有这些中最模糊和最令人费解的。

我相信唯一的选择是：

1. 放弃吧，让全栈开发人员修复排版并纠正所有挑剔的 CSS 并自己制定设计系统的策略（这不是一个合理的选择，他们无论如何都不想这样做）。
2. 等到 Chrome 实现了一个比 ShadowDOM 的基本 CSS 更复杂的 DevTools 工具（我认为不会很快发生这种情况）
3. 在 stack-overflow 上向其他同样沮丧的 UX 工程师寻求建议。

我在这里不仅仅是讨厌 Styled-Components，我真的在寻找适合封装组件开发流程的解决方案，该流程目前在 React 开发工作流程中无处不在——但 ALSO 在浏览器中也是可维护和可延展的，所以我的工作是t 困难 200 倍。我的开发团队同意，但没有人有解决方案。

我最近8.0.3从.js 升级到 Next.js，6.1.1现在我的标题内容正在使用styled-jsx. 它在更新 Next.js 之前加载得很好。

正在闪烁的标头代码是一个自定义构建的 npm 模块，它使用styled-jsx（但不是next）并被导入并放置到与每个next页面一起呈现的布局页面中。

这是_document.js更新前文件中的实现next，它正在工作：

根据文档，我也尝试过这个（我等待初始道具）：

闪存可能是我在哪里实现模块但不确定的结果。

似乎来自模块的代码没有与其余页面正确捆绑，从而使页面闪烁。任何想法或反馈将不胜感激。

Material UI 使用 JSS 作为其核心，您有时需要从其基础组件中覆盖样式。

示例来自Input：'&:hover:not($disabled):before'{ ... }

我找不到JSS 语法文档中提到的这种语法，因此很难与没有通用名称的其他人讨论。这叫什么？

我已经开始styled-components在我的一个项目中使用。我想知道在使用它的容器中覆盖/扩展它们的推荐方法。

例如：

一个可重用的Button组件：

现在假设我在一个部分中使用它，但需要应用左边距。我可以通过以下几种方式做到这一点：

延长：

内联样式：

如果要覆盖的规则超过 3,4 条，则扩展似乎是最好的方法。

margin但是对于像,这样的单个规则padding，display: none它可能会非常频繁地出现，每次创建一个新的包装器都会增加很多样板文件。内联样式在这方面效果很好，但它们也有自己的缺陷。

可以在大型应用程序中很好地扩展的最佳方法是什么？

我正在尝试使用 MaterialUI 框架设置菜单项的样式，但感觉很迷茫。

这就是我想要的：

而且，到目前为止，这就是我所拥有的：https ://codesandbox.io/s/542wvq4mxl

任何帮助将不胜感激。

我正在使用 React、React Admin、Babel、TypeScript 和 Webpack 建立一个项目。我使用的编辑器是 VSCode。

我正在尝试使用新的 Material UI 样式解决方案，然后特别是 Styled Components API。

我已经配置了 TSLint，因此需要将 a 添加typedef到变量声明中。

当我编写以下代码时：

TSLint 抛出以下错误：expected variable-declaration: 'StyledButton' to have a typedef (typedef)tslint(1). 请注意，Button我传递给styled()的是来自 Material UI 的组件：

import Button from '@material-ui/core/Button';

然后，当我将鼠标悬停在上面时，StyledButton我看到以下内容：

所以基本上 VSCode 告诉我StyledButton变量的类型，即React.ComponentType. 因此，如果我将代码更新为此：

我没有任何错误。伟大的！

但是现在我的问题开始了：当我将 更改Button为实际的 HTML 元素时button：

我的编辑器抛出以下错误：

当我删除typedef并再次悬停时StyledButton，我看到以下内容：

所以 VSCode 告诉我类型已更改为React.ComponentType<never>. 让我们将我的代码更新为：

错误消失了，很好！让我们使用StyledButton：

这会引发另一个错误：

我做错了什么还是？StyledButton当我实际使用组件时，如何正确键入而不出错？

我也在 GitHub 上发布了这个问题，但不幸的是它被关闭了：https ://github.com/mui-org/material-ui/issues/14898

如果您需要更多信息，请让我知道并提前致谢！

试图弄清楚如何使用 Emotion 中的样式覆盖选项卡指示器的样式。我不确定如何访问嵌套类。这就是我所拥有的，但它并没有让我到达那里：

任何帮助都是极好的！

我正在使用可以阅读polished哪些文档，这里是github repo。

在 JavaScript 中编写样式时，许多人需要 Sass 样式的辅助函数来提高工作效率。✨ Polish 将它们放在一个为 JavaScript 中的样式量身定制的漂亮、轻量级的包中。

我正在使用该tint功能，可以在上面的文档链接中找到如何使用它的示例：

通过将颜色与白色混合来着色。tint 会产生色调偏移，而 lighten 会操纵亮度通道，因此不会产生色调偏移。

我有一个存储我所有颜色的主题对象，它是这样的：

然后我将导出一些我打算重用的样式。如下所示：

但我收到以下错误：

未捕获的错误：发生错误。有关更多信息，请参阅https://github.com/styled-components/poliished/blob/master/src/error/errors.md#5。

不幸的是，上面返回的是 a404 Error所以我看不到它说什么。

我遇到了这个 stackoverflow 帖子在此处输入链接描述，它确实有效，但它并不是我想要的，因为我也在其他地方使用这种方法，并且不适合在这些情况下使用。所以理想情况下，我只想在提取主题对象颜色后传入一个变量。

以上是我想要的理想情况。这样我就可以在其他用例中轻松调用它。但我得到同样的错误。

我知道（相信）这与我传递第二个参数的方式有关。我知道它需要一个字符串，我假设它没有收到一个字符串，但我不知道如何修复。

我在这里看到了这篇文章，但再次不确定这是否是我要找的。

任何帮助将不胜感激

我有以下代码：

如您所见，我想将 a 传递className给外部 Card 组件。但是，我在开发工具中看到，头部添加了一个样式元素，但似乎它里面有文本，而不是样式，也就是说，里面的语法没有突出显示。结果，未应用样式。

所以我想知道我做错了什么？我使用了文档中所说的解析标签。

另外我想知道是否可以为元素定义样式，而不指定具体的标签名或类名？

我使用next.js和样式既不应用于开发模式，也不应用于生产模式。