相关疑难解决方法(0)

我正在使用 Material UI v4，我正在从单个文件导出我的样式，但这些样式在其他组件中不起作用。styles.js

const useStyles = makeStyles(theme => ({
    root: {
      display: 'flex',
    },
    // textField component styles
    textFieldInput: {
      margin: theme.spacing(2),
      width: 250,
      minWidth: 250,
    },
    formControl: {
      margin: theme.spacing(2),
      minWidth: 120,
    },


})
export {useStyles}

在我的组件文件中

    ....
    const classes = useStyles(styles);

    return (
        <TextField
            className={classes.textFieldInput}
            label={label}
            placeholder={label}
            error={touched && invalid}
            helperText={touched && error}
            {...input}
            disabled={disabled || false}
            readOnly={readOnly || false}
            required={required || false}
            InputProps={{ readOnly, ...custom }}
            {...custom}
        />
    );
     ....

当我在我的组件中使用它时，样式将在第一次热重载时起作用，但之后样式不会有任何影响，为什么？以及我如何解决这个问题

这个问题的目的是了解幕后发生的事情。每次找到代码时，makeStyles()我都会感觉自己只是在进行纯复制粘贴，而不了解引擎盖下发生的事情。所以我想在这里发布一个问题，以便有人可以帮助我。

我已经在许多React应用程序中看到以下类型的代码。我很想知道当我们打电话给时发生了什么makeStyles()。因此，我跳入了它的定义，但我不明白它的含义。有人可以帮助我了解如何阅读/理解它。

我在这里了解的是，我正在传递一个名为的函数theme。通过该函数后，我不知道发生了什么。我也很高兴有人能帮助我解决这个问题。

// Calling makeStyles()
const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
  },
  drawer: {
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0,
    },
  },
  appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  menuButton: {
    marginRight: theme.spacing(2),
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
}));

//definition of makeStyles()
import { Theme as DefaultTheme } from …