无法在组件中调用 useStyles (Material-UI)

Question

目前正在使用 Material-UI 的库做一个项目。我在造型上有问题。

我对 ReactJS 或一般的 JS 还是很陌生，做这个项目是我第一次与它互动。

任何帮助将不胜感激！

我无法像他们给出的示例那样设置我的文本框的样式。

这是我的代码：

  class AppBase extends Component {

    constructor(props) {
      super(props);
      this.state = {
          ...INITIAL_STATE
      };
  }

    classes = useStyles;

  render() {
    return (
      <Container component="main" maxWidth="md">

      <div className={this.classes.root}>
        <TextField required id="standard-required" label="Required" defaultValue="Hello World" />
        <TextField disabled id="standard-disabled" label="Disabled" defaultValue="Hello World" />
        <TextField
          id="standard-password-input"
          label="Password"
          type="password"
          autoComplete="current-password"
        />
        <TextField
          id="standard-read-only-input"
          label="Read Only"
          defaultValue="Hello World"
          InputProps={{
            readOnly: true,
          }}
        />
        <TextField
          id="standard-number"
          label="Number"
          type="number"
          InputLabelProps={{
            shrink: true,
          }}
        />
        <TextField id="standard-search" label="Search field" type="search" />
        <TextField
          id="standard-helperText"
          label="Helper text"
          defaultValue="Default Value"
          helperText="Some important text"
        />
      </div>
      </Container>
    );
  }
}

我举的这个例子来自：https://codesandbox.io/s/51hrm

我已经在顶部复制了 useStyles，这就是我得到的：

How the code looks like

这不是我在组件中调用 useStyles 时遇到此问题的唯一实例。

调用'classes = useStyles;'适用于某些 useStyles 而不是其他的，我真的很迷茫。

由于其他页面的处理方式，我不会考虑使用像给出的示例那样的函数。

提前谢谢你！

Answer 1

如果您从示例提供中复制useStyles 函数，则需要将其作为函数调用。现在，您只是将函数分配给 classes 变量，但从未执行该函数。所以只要改一行代码如下：

const classes = useStyles();

您将执行useStyles 函数并将结果分配给classes 变量。此时，您将能够在 jsx 中使用 classes 常量来设置组件的样式，如下例所示：

<form className={classes.root} ...></form>

Answer 2

useStyles 钩子只能在功能组件内部调用。如果要使用 useStyles 钩子，则必须将类组件更改为功能组件。

我还创建了一个实时沙盒供您玩耍：https://codesandbox.io/s/loving-bouman-47bek?fontsize=14&hidenavigation=1&theme=dark

下面的代码应该可以正常工作：

import React from "react";
import ReactDOM from "react-dom";
import { Container, TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

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

  return (
    <Container component="main" maxWidth="md">
      <div className={classes.root}>
        <TextField
          required
          id="standard-required"
          label="Required"
          defaultValue="Hello World"
        />
        <TextField
          disabled
          id="standard-disabled"
          label="Disabled"
          defaultValue="Hello World"
        />
        <TextField
          id="standard-password-input"
          label="Password"
          type="password"
          autoComplete="current-password"
        />
        <TextField
          id="standard-read-only-input"
          label="Read Only"
          defaultValue="Hello World"
          InputProps={{
            readOnly: true
          }}
        />
        <TextField
          id="standard-number"
          label="Number"
          type="number"
          InputLabelProps={{
            shrink: true
          }}
        />
        <TextField id="standard-search" label="Search field" type="search" />
        <TextField
          id="standard-helperText"
          label="Helper text"
          defaultValue="Default Value"
          helperText="Some important text"
        />
      </div>
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

另外我强烈建议你开始使用函数式组件而不是类组件，因为函数式组件是 React 的未来。