javascript - 断点 css 不适用于 React-jss 中的道具

Question

我遇到了 React-JSS 的问题。我创建了一个模式类，其高度属性取决于传递给组件的道具。在响应式设计中，我希望高度是，100%但不知何故，它在 CSS 中没有得到优先考虑，因为当我在样式中使用道具时，React-JSS 创建了两个类。

反应 JSS 代码

  modal: {
    borderRadius: 10,
    width: 750px,
    height: ({ height = 550 } => height,
    [breakpoints.MOBILE]: {
      height: 'auto',
    },
  },

输出

它创建了两个类，因为我正在访问样式中的道具，并且媒体查询没有得到优先级。

期待帮助。

Answer 1

您可以尝试更改样式，因为文档这样说：

modal: {
  borderRadius: 10,
  width: 750px,
  height: ({ height = 550 } => height,
},
[breakpoints.MOBILE]: {
  modal: {
    height: 'auto'
  }
}

更新。如果你想要嵌套属性，例如媒体查询或额外的选择器，你需要包含这个官方插件：https ://cssinjs.org/jss-plugin-nested?v=v10.0.0