在material ui中创建的目标CSS子选择器

import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  myButton: {
    // 自定义样式
  },
});

function MyComponent() {
  const classes = useStyles();

  return (
    <Button className={classes.myButton}>
      My Button
    </Button>
  );
}

import { TextField } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  myTextField: {
    // 自定义样式
  },
});

function MyComponent() {
  const classes = useStyles();

  return (
    <TextField classes={{ root: classes.myTextField }} />
  );
}

import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  myButton: {
    '&:hover': {
      // 自定义样式
    },
  },
});

function MyComponent() {
  const classes = useStyles();

  return (
    <Button className={classes.myButton}>
      My Button
    </Button>
  );
}