javascript - 断点 css 未应用于 React-jss 中的 Prop

Question

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

React JSS 代码

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

输出

它创建了两个类，因为我正在访问样式中的 Prop ，而媒体查询没有获得优先权。

期待您的帮助。

Answer 1

您可以尝试将样式更改为 docs says这样:

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

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