javascript - 是否可以通过使用类向 React 组件添加内联样式？

Question

所以我是 React 的新手，我来自 Angular 背景，我们只有类。
我现在想弄清楚在使用类时是否可以为我的 html 添加样式。

React 文档（关于Drawers）正在使用一个函数来创建组件。但我习惯于使用类而不是函数。

所以问题是，是否可以按照我现在尝试的方式（以及在课堂上）为元素添加样式？

const useStyles = makeStyles({
    list: {
      width: 250,
    }
});

export default class NavBar extends Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = { open: false };
    }

    // Will complain about this
    readonly classes = useStyles();

    render() { 
        return (
            <div className={this.classes.list}>test</div>
        )
    }
}

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：
1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 你可能有多个 React 副本同一个应用程序
请参阅...以获取有关如何调试和解决此问题的提示

标签： javascriptreactjs

Answer 1

这就是您可以使用样式对象在 React 中定义内联样式的方式。

const useStyles = {
  list: {
    width: 250,
    color: 'red'
  }
};
class NavBar extends React.Component {
  constructor(props) {
      super(props);
      this.state = { open: false };
  }
  render() { 
      return (
          <div style={useStyles.list}>test</div>
      )
  }
}