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

【问题标题】：Breakpoints css is not applied over props in React-jss断点 css 不适用于 React-jss 中的道具
【发布时间】：2020-03-23 19:53:05
【问题描述】：

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

反应 JSS 代码

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

输出

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

期待帮助。

【问题讨论】：

标签： javascript css reactjs css-in-js

【解决方案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

【讨论】：

我尝试了您的解决方案，但它不起作用。 jss-plugin-nested 已安装。