问题标签 [css-in-js]
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.
javascript - 如何使用 CSS-in-JS 改变 CSS 自定义属性颜色？
假设我有以下带有情感 css`` 属性的代码：
但我想使这个 div 的背景变暗。
使用 sass 使用 darken() 函数会很简单，但我认为不可能在情感中使用 sass？
另一种选择是使用 javascript 变暗函数，例如来自 Polish.js 的函数：
但是，这也是不可能的，因为var(--bg)在 javascript${ }范围内无法访问 CSS 自定义属性。
有没有简单直接的解决方案来解决这个问题？
javascript - 如何使用 withStyles 编写 Mozilla 特定的 CSS
我正在开发一个 React 应用程序并withStyles在 JS 库中使用 CSS 来处理 CSS。我在 Mozilla 中遇到了一个问题，我必须根据 Mozilla 浏览器更改高度属性。如何在 JS 中使用 CSS 更改它？似乎@-moz-document url-prefix()不适用于 withStyles。
reactjs - 如何在 JS 和 React Router 中使用 CSS 设置活动链接子项的样式？
我在 JS 中使用 React ROuter 和 CSS 作为样式。我想更改活动链接子 div（navIndicator 和 innerIndicator）的背景颜色和边框颜色
但是，当 nav 链接处于活动状态时，navIndicator 和 innerIndicator 颜色不会改变。想知道如何使样式适用于活动链接？
ios - Iphone 5/SE CSS 媒体查询更改也适用于 Iphone 6/7/8 分辨率
嗯，它类似于我的 iPhone 6 获取 iPhone 5 媒体查询问题，但我仍然无法弄清楚答案。
我有一个用 Iphone 5/SE 媒体查询编写的 CSS，如下所示：
同样的 CSS 也适用于 Iphone 6/7/8 设备。我正在使用CSS in JS.
css - 将字体堆栈从 SCSS 迁移到 JSS (cssinjs)
我们为各种目的使用了许多具有不同权重的自定义字体。现在我们的整个堆栈都在使用带有 JSS 主题和样式的 Material UI，我们希望摆脱.scss文件夹架构中的最后几个文件。
到目前为止，所有字体都与 SCSS 语法完美配合。
我们index.scss在应用程序的主入口点导入了一个文件。它只有一行：
styles/_fonts.scss包含很多字体：
该styles/fonts文件夹中包含所有字体文件。
我已经成功地将全局 Material UImakeStyles样式附加到head. 这允许我注入全局 CSS 而不是基于组件的 JSS：
此语法<style>在底部添加一个标签<head>并应用样式。这适用于非字体样式。
主要问题：出于某种原因，它不会更新我的字体堆栈。字体已下载，但页面元素仍使用备用字体。
我也尝试过直接使用 JSS 并在<head>. 没运气。手动将字体写入<style>头顶的标签会下载字体（我可以看到它们出现在“网络”选项卡中），但页面元素会更新并仍使用备用字体。
css - withStyles 的 Material UI 潜在的缓慢性能
我的任务是让我们的 react redux web 应用程序中的页面加载得更快。
当加载页面的动作触发时，我们会得到大约 0.5 秒的小冻结。
我打开了探查器，乍一看似乎没有任何问题。
火焰图
没有不必要的重新渲染，唯一显示的黄色警告大约是 10 毫秒。
当我转到分析器中的排名选项卡时，我得到了一个稍微不同的故事，我发现大部分时间都花在了 withStyles() 中。
排名图
我们通过 withStyles() 在 JS 中使用 CSS 的 material-ui 方法，看起来 WithStyles() 的使用显着影响了加载速度。
是这样吗？或者这仅仅是“我一次渲染太多东西”的情况
将 JS 中的 CSS 转换为仅 CSS 将是一项重大的努力，尽管我确实花了一个小时将 JS 中的 CSS 剥离出来，发现性能提高了大约 40%，尽管我不知道这 40% 中有多少是由于 withStyles 与页面上样式元素的性能相比。
next.js - 如何解决`styled-jsx`（stylelint）中变量名的`Unknown word (CssSyntaxError)`
我将Next.js与styled-jsx 和 stylelint一起使用，一切都很顺利，直到我开始variables在styled-jsx中使用，因为 stylelint 抛出stylelint(CssSyntaxError)了这些变量。
例如
我不知道如何修复它，或者它是否有任何可以提供帮助的插件。
css - 如何在 ant-design 组件中使用 css-in-js？
CRA实际上，我继承了一个 ReactJS Web 应用程序，它由Ant-Design初始化。我刚刚使用 Material-UI 并且没有使用And Design的经验。
Material-UI 处理样式的方式很棒，但 AntD 用于less处理 CSS。我很难像古人一样工作。
我搜索了很多，但没有找到在 Ant Design 项目中使用JSS[ CSS in JS ] 的方法。
我的意思如下：
但是在 Ant Design 文档中只是像古老的东西一样声明：
我该怎么做？或者有什么方法可以将 JSS 用于 AndD 组件？
reactjs - CSS 模块：&.className
有可能做这样的事情CSS Modules吗？
CSS
JS
因为我想避免这样做：
JS
javascript - 如何使用样式组件显示一些值？
我是样式组件的新手，我有点困惑。我们可以显示一些东西或向 styled-compoentns 添加功能吗？或者 styled-components 是我们只能应用 css 的组件