reactjs - makeStyles 在 React 中不起作用（功能组件）

Question

由于字体大小，我不喜欢我的登录页面目前是 3 行文本，所以我想在移动设备的小屏幕上使其更小。这是我使用的代码：

import * as React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import {GoogleLogin} from 'react-google-login';
import GoogleButton from 'react-google-button';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import InputLabel from '@mui/material/InputLabel';
import FilledInput from '@mui/material/FilledInput';
import {makeStyles} from '@material-ui/core/styles';
// global context
import globalContext from './globalContext';

const useStyles = makeStyles((theme) => ({
  smLoginFontSize: {
    [theme.breakpoints.between('sm', 'sm')]: {
      fontSize: 2,
    },
  },
  option: (selectedListItem) => ({
    width: 400,
    maxWidth: 400,
    height: 50,
    left: -30,
    backgroundColor: selectedListItem.isSelected ? '#3f51b5' : '#3f51b5',
    padding: 20,
  }),
}));


/**
 * Simple component with no state.
 *
 * @return {object} JSX
 */
export default function LoginForm() {
  const {loginOpen} = React.useContext(globalContext);
  const {setLoginOpen} = React.useContext(globalContext);
  const [values, setValues] = React.useState({
    email: '',
    password: '',
    showPassword: false,
  });

  const classes = useStyles();

  const handleClose = () => {
    setLoginOpen(false);
  };

  const handleClickShowPassword = () => {
    setValues({
      ...values,
      showPassword: !values.showPassword,
    });
  };

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };

  const handleChange = (prop) => (event) => {
    setValues({...values, [prop]: event.target.value});
  };

  const handleGoogleSuccess = (googleData) => {
    console.log(googleData);
  };

  const handleGoogleError = () => {
    console.log('google sign in error');
  };

  return (
    <div>
      <Dialog open={loginOpen} onClose={handleClose}>
        <DialogTitle style={{color: '#811010'}}
          className={classes.smLoginFontSize}>
          Login with an existing account, Google,
             or Facebook</DialogTitle>
        <DialogContent>
          <DialogContentText style={{color: '#3E76E9'}}>
            Login with an existing account:
          </DialogContentText>
          <div>&nbsp;</div>
          <InputLabel htmlFor="filled-adornment-password"
           style={{fontSize: 12}} >
            Email Address *</InputLabel>
          <FilledInput
            required
            value={values.email}
            onChange={handleChange('email')}
            label="Email Address"
            placeholder="Email Address"
            fullWidth
            margin="dense"
          />
          <div>&nbsp;</div>
          <InputLabel htmlFor="filled-adornment-password"
           style={{fontSize: 12}} >
            Password *</InputLabel>
          <FilledInput
            id="filled-adornment-password"
            type={values.showPassword ? 'text' : 'password'}
            value={values.password}
            onChange={handleChange('password')}
            placeholder="Password"
            fullWidth
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                  edge="end"
                >
                  {values.showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>
              </InputAdornment>
            }/>
          <div>&nbsp;</div>
          <GoogleLogin
            clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
            buttonText='Sign In with Google'
            onSuccess={handleGoogleSuccess}
            onFailure={handleGoogleError}
            cookiePolicy={'single_host_origin'}
            render={(renderProps) => (
              <GoogleButton
                style={{width: 208}}
               >
                Sign In with Google
              </GoogleButton>
            )}
          />
          <div>&nbsp;</div>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose}>Login</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

在为 makeStyles 添加代码之前，我的登录页面如下所示：

现在，它看起来仍然一样（用于测试的 fontSize 2 应该非常明显）：