问题标签 [css-in-js]

我正在寻找一种方法来从 JavaScript 更改伪类选择器（例如 :link、:hover 等）的 CSS 规则。

所以类似于 CSS 代码：a:hover { color: red }在 JS 中。

我在其他任何地方都找不到答案；如果有人知道这是浏览器不支持的东西，那也将是一个有用的结果。

我在 CSS-IN-JS 项目中使用 stylelint（这里使用 astroturf，但我也面临使用任何 CSS-IN-JS 库（如 styled-components）的相同模式）。

我在同一个文件中定义了不同样式的元素，因此有时最终会出现重复的选择器和/或导入规则。

我这样写的：

有没有办法在块而不是整个文件上设置这些 stylelint 规则？

我的 MUI 组件库 ( Styles A ) 的 JSS 样式正在取代消费者网站 ( Styles B ) 提供的样式。

样式 A 旨在被样式 B 覆盖。

举这个最小的例子：

样式 A（在组件库中）

样式 B（在消费者网站中）

导致元素具有级联样式：

样式 B 的绿色被样式 A 的红色覆盖。

编辑：这个顺序背后的原因似乎是 MUI（特别是withStyle()函数）注入样式表的顺序。

虽然这可以通过在 withStyles 选项中传递一个索引来修复（如此处所述），即：export default withStyles(styles, {index: 1})(Page);. 这似乎不是图书馆环境中最有效/最有效的方法。

有没有办法在不为每个 withStyles 声明索引的情况下指定 MUI 样式 < 组件库样式 < 消费者样式的顺序？

我正在使用 Webpack 4、Babel 7 和 Emotion 10。

我安装了@emotion/core @emotion/styled 和推荐的插件 babel-plugin-emotion

样式工作正常。我可以创建一个样式化的组件并使用它。但是，如果我尝试使用本机 css`` 功能，它会渲染对象而不是样式。

如果我检查我看到的标记

如果我使用className而不是css，是一样的。另外，如果我内联或使用 css() 功能。

如果我 console.log() 那个 Object 结果是：

任何人都知道出了什么问题...？我将不胜感激。我进行了研究，但找不到其他人提到这个问题，所以可能我做错了什么。

我正在使用 styled-components CSS-in-JS 设计我的 Gatsby.js 网站。

styled-components 是否让我的 CSS 跨浏览器兼容？

例如，假设我正在为表单设置样式。使用传统的 CSS，我会做类似的事情：

使用样式组件，我想这样做：

我可以省略这些-moz或-webkit声明并最终得到跨浏览器兼容的 CSS 吗？

我是 CSS-in-JS 和情感的初学者，并试图将一个 sass react 应用程序移植到情感上。从一开始我就已经遇到了不知道如何设置 body 标签样式的问题。

人们通常习惯document.body.style这样做吗？我在任何地方都找不到这个...

假设我想将以下代码移植到情感上，那将如何实现？

是否已经发展出任何涵盖此内容的最佳实践？

这似乎是一个最佳实践，因为它几乎无处不在。但是，没有任何地方清楚地解释它到底做了什么......

我确实在文档中找到了一条评论：“这条评论告诉 babel 将 jsx 转换为对名为 jsx 而不是 React.createElement 的函数的调用”。这是否仅仅意味着它用 Emotion 替换了标准的 React 功能？省略 /** @jsx jsx */ 评论有什么后果吗？

我正在使用 react-jss 构建一个应用程序来为我的组件设置样式，并且想知道是否可以将样式添加到顶级元素（如html或body）。

为了说明，我有一个简单的 NotFound 组件，我正在使用 react-jss 进行样式设置。样式工作正常，但问题是body元素有一个我想删除的默认边距。

NotFound.js

有谁知道是否可以使用 css-in-js 删除此边距？（我想避免使用 CSS）

我正在寻找使用服务器端渲染设置 React 应用程序样式的最佳实践。

我看到了不同的选择，例如使用 SASS 之类的预处理器，或者将样式放入 JS 代码中，例如 JSS、样式组件等。

玩 JSS，我看到它把样式放在 HTML 中的 head 部分。我只是使用以下示例来查看行为：

https://github.com/cssinjs/examples/tree/gh-pages/react-ssr

它不会阻止浏览器缓存 CSS 以将其放入 head 部分并因此增加连续页面加载时间吗？有没有办法使用 JSS 将样式设置到外部文件，以便浏览器可以缓存它？

这是我最初回答的另一个好 stackoverflow 帖子的链接。我正在尝试设置我的 ReactSelect 组件的样式，使其看起来像这样：

从上面的屏幕截图中看不出来，但是选择框的高度（总共 29 像素）比默认的 ReactSelect 小得多，这是我的第一个造型目标（降低高度）。这是我现在试图降低高度的代码，主要来自我链接到的stackoverflow帖子：

这是上面示例的结果：

...不完全是我想要的。此外，当我使用customStyles而不是customControlStyles在上面的示例中时，样式不再起作用，并且我不确定我在创建customStyles时做错了什么导致它不起作用。我想我需要做一些类似的事情customStyles，因为看起来我需要的不仅仅是controlReactSelect 的一部分。

第二，我想删除 ReactSelect 中的竖线和向下插入符号，类似于初始屏幕截图。

任何有关此样式的帮助将不胜感激！我已经为此工作了很长一段时间，但还没有成功。谢谢！