问题标签 [css-in-js]

我正在使用 reactjs-popup，其中一个道具是contentStyle，它允许您传递 css-in-js 对象来设置库中的内部 div 样式。

但是，当我在其中传递带有 @media 的 css 对象时，库不会处理它。

我想知道是否有办法告诉情感“翻译”这个对象，或者以某种方式包装库元素，以便它可以根据需要处理 @media 查询。

这是一个演示代码：

编辑：经过进一步测试，似乎每次重新渲染组件时都会再次执行材料 UI 的 makeStyles，而 JSS 的 createUseStyles 则不是！

我有一个组件必须根据状态动态更改样式。当我使用随 material-ui 提供的 makeStyles 时，代码可以完美运行：

但是我不想用material-ui，我只想用JSS。不幸的是，它不起作用。看起来filteredItems.length > 0总是返回false，所以我猜想createUseStyles由于某种原因的执行方式与makeStyles不同：

我知道 material-ui 在 JSS 引擎下运行，所以我对这种行为感到困惑。我想过添加两个 CSS 类并在我的 JSX 中切换它们，但我认为解决样式中的问题是这里最干净的解决方案。任何人都知道为什么会发生这种情况或如何解决这个问题？

EDIT2：为了解决这个问题，我只是创建了两个类并在 JSX 中切换它们：

接着：

我需要一种方法来创建没有stylednorcss方法的类。

让我们假设适当的样式系统，组件只有基本样式，但没有定位、边距等。

例如

所以这很容易，我为组件附加了私有样式，并允许它从父级接收和应用类。

如果我有“经典”css，我会这样使用它

这将按预期工作。

这是问题所在：

如何styled-components只创建一个类？它曾经使用Glamorous过，但 SC（和 Emotion）没有从css.

我不能使用单独的 css 文件来允许这种样式，这应该是常见的用例（父级设置子级的大小）

Emotion 中的编辑和解决方案

我发现 Emotion 添加了css可用于每个 jsx 元素的额外属性。它可以用于原生<div>、样式化<Div>或自定义 React 组件<MyComponent。Babel在编译期间将css属性更改css({...})为 className。如果<MyComponent>只接受 prop className，它将通过cssprop 从父级接收。

Emotion 文档告诉我们如何在 css 道具中进行可重用的媒体查询。这允许我们在 css prop 中进行以下查询：

使用mq[0]并mq[1]引用断点数组中的前两项。例如： const breakpoints = [576, 768, 992, 1200]。

此外，本文更进一步，展示了如何使用断点对象获取命名的可重用媒体查询。它首先根据情感文档创建一个类似的功能，但对于对象：

这允许我们创建一个带有命名媒体查询的断点对象：

到目前为止，一切都很好。

我现在想在情感风格的组件中做类似的事情。因此，我创建了一个断点对象和与上述文章中提到的相同的函数。

然后我尝试在我的情感样式组件中使用速记媒体查询——就像这样：

但是当我尝试这个时，它不起作用。我收到以下错误消息：

知道为什么会发生这种情况以及我能做些什么来让它发挥作用吗？

谢谢。

我有不同的“卡片”，点击时onClick我希望margin-left修改他们的属性

为此，我使用useState它，为此我只有一个状态，它是一个存储所有卡片状态的对象

下面的示例代码显示了问题，但是没有组件<Type>且使用简单elements数组的简化版本可以按预期工作

那么，如果我需要使用像下面这样的结构，我怎样才能保持过渡效果呢？

示例代码

https://codesandbox.io/s/keen-shadow-2v16s?fontsize=14&hidenavigation=1&theme=dark

我使用样式化组件在 React 中创建了一个下拉组件。这是组件的简化轮廓：

现在，当我导入和使用组件时，我希望能够覆盖嵌套组件的默认样式（即DropdownBase，Trigger和Submenu）。我希望能够使用 Styled Components 覆盖这些默认样式。问题是，我不导入那些嵌套组件——我只导入Dropdown组件——像这样：

所以我想知道，当我使用 Styled Components 导入父组件时，如何覆盖那些嵌套组件？

在 Styled System 中，他们有Responsive Props。例如：

这将产生以下 CSS：

作为替代方案，可以使用以下语法：

它将产生相同的结果。

我想知道是否可以使用 Styled Components 做类似的事情。我的想法是这样的：

样式化组件可以做到这一点吗？如果没有，知道如何创建一个可以做到这一点的函数或“混合”吗？

谢谢。

我正在使用类似的东西，<span className={`${status_icon} ${classes[`${status}`]}`} />但我想析构该对象并使用它。有什么办法吗？

目前我有

我想像这样使用它

源代码 - CodeSandBox

我正在尝试使用一些内联样式（特别是道具）覆盖Emotion 样式组件的基本样式。css但是，内联样式不使用css道具应用，我发现唯一可行的方法是使用styles道具。

这是一个基本示例：

这是一个有效的CodeSandbox

我们如何覆盖样式化组件的样式，以便将内联样式与 Emotion 生成的类捆绑在一起？

我在 React 中使用样式化的组件。每当我在样式化组件中编写样式并且如果在浏览器中加载应用程序时，我都会在开发人员工具的元素选项卡中获得一些随机类名称。我只想知道幕后发生了什么？

)

如果我们检查并检查开发人员工具中的元素，我可以看到一些随机类显示如下；