斷點 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

Answer 2

您的兩個類都不相同，因此無法正常工作。

.Modal-modal-0-0-2-179 {...}

.Modal-modal-0-0-2-177 {...}

Answer 3

現在是舊帖子，但我遇到了同樣的問題，這對我有用（使用你的例子來解決）：

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

tl;dr，似乎如果你使用 prop 函數在某處定義一種風格，你必須在任何地方都使用它。 然后它將在您的斷點處獲取樣式。