如何用JSS覆盖Material-UI的非确定性类样式？

Great question! When working with Material-UI components like TextField, you’ll run into dynamically generated class names (e.g., MuiInputLabel-shrink-1234) that have numeric suffixes—hardcoding these full class names is fragile and won’t work across builds. Here are the most reliable ways to target them in your JSS styles:

1. Use Material-UI's Official Class Name Constants #

Material-UI exports dedicated constants for all its component classes, which automatically map to the correct generated class names (including any suffixes). This is the most robust approach because it’s tied directly to the library’s API.

First, import the relevant class constants:

import { inputLabelClasses } from '@mui/material/InputLabel';

Then use the constant in your JSS styles:

const styles = {
  '@media (min-width: 768px)': {
    borderLabel: {
      top: 2,
      // Target the shrink state using the official constant
      [`&.${inputLabelClasses.shrink}`]: {
        top: -2,
      }
    }
  }
};

This ensures your selector always matches the correct generated class, even if the numeric suffix changes between builds or Material-UI versions.

2. Use a CSS Attribute Selector for Partial Matching #

If you prefer not to import the class constants, you can use a CSS attribute selector to match the prefix of the generated class name. This works because Material-UI's generated classes always retain their base prefix (like MuiInputLabel-shrink) before the numeric suffix.

Here's how to implement it:

const styles = {
  '@media (min-width: 768px)': {
    borderLabel: {
      top: 2,
      // Match any class containing the "MuiInputLabel-shrink" string
      '&[class*="MuiInputLabel-shrink"]': {
        top: -2,
      }
    }
  }
};

The [class*="value"] selector matches any element whose class attribute contains the specified substring. Just note that this could theoretically match unrelated classes if they share the same prefix, but Material-UI's strict naming conventions make this extremely unlikely.

3. Style Directly via Component Props (Alternative Approach) #

Another option is to apply your conditional styles directly through the component's props using Material-UI's styling utilities. For example, you can use useStyles and target the shrink state via the InputLabelProps:

import { makeStyles } from '@mui/styles';
import { inputLabelClasses } from '@mui/material/InputLabel';

const useStyles = makeStyles({
  borderLabel: {
    top: 2,
    '@media (min-width: 768px)': {
      [`&.${inputLabelClasses.shrink}`]: {
        top: -2,
      }
    }
  }
});

// In your component:
const classes = useStyles();

<TextField
  label="Your Label"
  variant="outlined"
  InputLabelProps={{ className: classes.borderLabel }}
/>

This keeps your styles tightly coupled to the component and leverages the same reliable class constant approach.

内容的提问来源于stack exchange，提问作者Adam Boostani