问题标签 [css-in-js]

如何将不同的样式应用于已交付和待处理的部分列表？

我想更改状态数据的颜色文本。

像状态数据待定文本应该是红色的。

传递的状态数据文本应该是绿色的。

我怎样才能做到这一点？

或者我应该手动输入这些数据？s

代码如下：

样式代码如下：

https://codepen.io/xayaraj/pen/amzydG

我在我的 React 应用程序中使用 JS 中的 CSS，我想知道如何将属性-webkit-transition放在我们的 CSS 中。

上面的代码是我在 JS 中使用 CSS，我想知道如何添加下划线类并添加-webkit-transform属性。

我正在尝试设置已经设置样式的组件。但是新规则中的样式不会应用于输出 CSS。

我可以为我已经设置样式的组件设置样式吗？

提前感谢您的帮助。

编辑：添加 LanugageChooser 定义的其余部分

我希望我的页面转换根据屏幕大小有条件地发生。我不希望动画发生在小屏幕上。这是我写的：

我尝试了不同的变体，但它不起作用。

我制作了一个推荐旋转木马，我想在其中集成一个弹簧反应动画。我只使用 spring react 几天，这是我以前从未见过的错误。元素相互堆叠。对于我的过渡，我有：

我知道如果我键入position: absolute而不是 gridRow，动画将起作用。然而，我试图制作动画的这个项目是在一个网格容器中，当我使用 absolute 时，它​​会破坏我的整个设计。有没有办法可以保留该 gridRow 并让我的动画正常工作？密码箱

我正在尝试在 Fluent UI React 库的组件内设置 HTML 元素的样式。

我想要做的是将“开”/“关”文本放在切换开关的左侧而不是左侧。当我查看我的“编译”代码时，我可以看到该组件被翻译成：

我想将 inline-flex 添加到 target-me div 并将 flex-flow 属性设置为 row-reverse 以便将按钮元素放在标签元素的右侧。问题是，我无法在我的代码中定位“target-me”div。

如何在不重写自定义组件的情况下实现这一目标？

谢谢！

我创建了一个 react 样式组件，它被融合到 brwoser 中，如下所示

我在哪里可以看到检查 DOM 树中“css-ed5ehc”和css-1nrs7xj类的实际 css 样式？

我可以在检查时在样式选项卡中看到样式，但不确定它来自哪里。它只显示在开发人员工具中

提前致谢

我正在使用Material-UI和构建一个表单，并使用makeStyles并CSS-In-JS进行样式设置。我有一个来自 Material-UI 库的表单，我正在尝试设置它的样式。我试图弄清楚如何定位来自库的表单元素的类并覆盖样式。

这是Material-UI我要定位的表单和类（表单的第一个文本输入字段的before标签）：

我想更改文本字段的border-bottom属性。这是我尝试过的。查看underlineCSS 中的类和表单的第一个文本输入：

通常，当我使用这种方法进行样式设置时，如果我包含const classes = useStyles();在我的函数中，我可以在元素上使用className={classes.nameOfClass}，然后以该元素为目标，makeStyles我可以设置元素的样式。这非常适用于我正在设计的自定义元素，但不适用于覆盖Material-UI库类。

如何定位和.MuiFilledInput-underline:before自makeStyles定义样式？

我想渲染任何给定的 material-ui 组件，但没有默认的 css - 并自己设置样式。

让我们以TextField组件为例。

默认情况下，它应用了很多类：

我只想渲染 HTML

并将我自己的 css-in-js 生成的类名提供给任何呈现的元素。

如何使用任何 mui 组件实现这一目标？

首先，我对 react 和 CSS-IN_JS 很陌生，所以这可能是一个菜鸟问题。但我无法找到一个好的答案。

我正在尝试以我正在使用的表单为我的 react-project 实现浮动标签。项目回购： https ://github.com/DawidGaleziewski/alpha-tank-full-stack/tree/master/client

我创建了一个结合标签和输入字段的单独组件： https ://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/atoms/Inputs/InputSlider.js

为了决定标签是否应该向上移动，我使用输入的状态，如果它的长度 > 0，我应用样式来向上移动标签。

输入的状态与表单状态相关联： https ://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/Forms/LoginForm.js

这很好用，但是，问题出在登录表单和自动完成（浏览器中保存的凭据/密码）当它们应用于浏览器时，组件会记住我为表单/输入设置的初始状态并且标签正在覆盖输入中的文本： 问题的图片

我可以想到 2 个解决方案，但我不太确定：

1. 不要使用情绪状态来决定标签是否应该打开，而是使用标准 css 技巧和目标输入：有效 + 标签。但是，问题是我应该在输入标签上使用 required 。我的应用程序中有很多字段是可选的。

2. useEffect 从组件挂载的表单中获取输入的初始状态（即 document.querySelector(input).value）。但是我不确定这一点，因为我认为我不应该从 DOM 中获取状态值。

感觉就像我在这里遗漏了一些明显的东西。感谢您的任何建议