JSS 中的 MUI 全局類名稱有多可靠？

Question

我有這樣的代碼：

const formControlStyles = {
  root: {
    '&:hover .MuiFormLabel-root': {

     }
  }
}

在主題覆蓋中使用類名來訪問其他組件是否安全？ 另外，是否有一種 JSS 方式可以從其他組件中嵌套樣式？

Answer 1

v5 的更新這個答案最初是關於 Material-UI 的 v4 編寫的。 在 v5 中，Material-UI 不再使用全局類名來應用默認樣式——用於默認樣式的類具有由 Emotion 生成的類名。 全局類名仍然適用，但它們不再受嵌套主題的影響，因此在 v5 中利用全局類名進行覆蓋是完全安全的，而無需使用[class*=...下面回答。

---

使用全局類名是相當安全的，但有一個警告（在 v4 中）。 如果您利用嵌套主題，嵌套主題中應用的全局類名稱將具有不可預測的后綴（例如MuiFormLabel-root-371 ）。 此后綴是必要的，因為與嵌套主題關聯的默認樣式可能不同。

為了以完全安全的方式定位類名，您可以使用*= 屬性選擇器（例如[class*="MuiFormLabel-root"] ），它檢查元素是否具有包含MuiFormLabel-root的類名而不是需要完全匹配它。 您可以在此處查看Material-UI 本身中使用的這種方法。

只要您不打算使用嵌套主題，使用精確匹配全局類名的更簡單的語法是安全的（並且更具可讀性）。 另一種方法是在嵌套組件上指定一個 JSS 類，並使用 JSS 語法引用該類以引用同一樣式表中的另一個規則（例如，在我的示例中$myFormLabel ），但這需要能夠應用該類（例如在我的示例中的classes.myFormLabel ) 到嵌套組件。

下面是一個示例，它演示了使用嵌套主題時的問題（以及一些可能的解決方案）。

import React from "react";
import {
  ThemeProvider,
  createMuiTheme,
  makeStyles
} from "@material-ui/core/styles";
import FormLabel from "@material-ui/core/FormLabel";

const theme1 = createMuiTheme();
const theme2 = createMuiTheme({
  overrides: {
    MuiFormLabel: {
      root: {
        color: "#00ff00"
      }
    }
  }
});

const useStyles = makeStyles({
  mostlySafe: {
    "&:hover .MuiFormLabel-root": {
      color: "red"
    }
  },
  safeButTediousAndMoreErrorProneSyntax: {
    '&:hover [class*="MuiFormLabel-root"]': {
      color: "purple"
    }
  },
  alternativeApproach: {
    "&:hover $myFormLabel": {
      color: "blue"
    }
  },
  myFormLabel: {}
});
export default function App() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme1}>
      <div>
        <div className={classes.mostlySafe}>
          <FormLabel>FormLabel within top-level theme</FormLabel>
        </div>
        <ThemeProvider theme={theme2}>
          <div className={classes.mostlySafe}>
            <FormLabel>
              FormLabel within nested theme (hover styling doesn't work)
            </FormLabel>
          </div>
          <div className={classes.safeButTediousAndMoreErrorProneSyntax}>
            <FormLabel>
              FormLabel within nested theme using safe approach
            </FormLabel>
          </div>
          <div className={classes.alternativeApproach}>
            <FormLabel className={classes.myFormLabel}>
              FormLabel within nested theme without using global class names
            </FormLabel>
          </div>
        </ThemeProvider>
      </div>
    </ThemeProvider>
  );
}