JSS中的MUI全局类名称有多可靠? [英] How reliable are MUI Global Class names in JSS?

问题描述

我有这样的代码:

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

在主题覆盖中使用类名称来访问其他组件是否安全?另外，是否有JSS方式从其他组件嵌套样式?

解决方案

这是相当安全的，但有一个警告.如果您使用嵌套主题，则在嵌套主题中应用的全局类名称将具有不可预测的后缀(例如 MuiFormLabel-root-371 ).此后缀是必需的，因为与嵌套主题关联的默认样式可以不同.

为了以完全安全的方式定位类名，可以使用 * =

I have code like this:

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

     }
  }
}

Is it safe to use the class name in theme overrides to access other components? Additionally, is there a JSS way of nesting styles from other components?

解决方案

It is fairly safe, but with one caveat. If you leverage nested themes, the global class names applied within the nested theme will have an unpredictable suffix (e.g. MuiFormLabel-root-371). This suffixing is necessary, because the default styles associated with a nested theme can be different.

In order to target the class names in a completely safe manner, you can use the *= attribute selector (e.g. [class*="MuiFormLabel-root"]) which checks to see if the element has a class name that contains MuiFormLabel-root rather than needing to match it exactly. You can see this approach used within Material-UI itself here.

So long as you don't intend on using nested themes, it is safe (and much more readable) to use the simpler syntax of matching the global class names exactly. An alternative approach is to specify a JSS class on the nested component and refer to that class using the JSS syntax for referring to another rule in the same stylesheet (e.g. $myFormLabel in my example), but this requires being able to apply that class (e.g. classes.myFormLabel in my example) to the nested component.

Below is an example which demonstrates the issue (and some possible solutions) when using nested themes.

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>
  );
}

这篇关于JSS中的MUI全局类名称有多可靠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！