React组件中的Material UI样式

Question

在这里，您可以看到如何在React组件之外使用Material UI样式的示例。

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

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',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

我想做同样的事情，但是在React组件内部：

class Component extends React.Component {

render() {

const {height} = this.props

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: height,
    padding: '0 30px',
  },
});

const classes = useStyles();

return <Button className={classes.root}>Hook</Button>;
}}

这可行吗？

我看到这里需要正确版本的React与Hooks，但我没有找到任何人在makeStyles类中使用它的示例。

- Andrey Radkevich

Answer 1

makeStyles 创建一个 React hook；因此，您不能与类组件进行互操作。

Hooks 用于完全替代类，因为 React 正在向纯函数组件的方向发展，以便进行编译器优化和其他低级别的事情（尽管开发人员也可以从中获得外部好处，例如更少冗长，更充分利用并更直观地使用 JS 的功能性质）。在 makeStyles 的情况下，您将获得额外的好处，例如能够使用 任何 变量，包括传统上应该是 props 和 state 的变量，并且只有在您提供的可观察参数改变时，JSS 才会自动重新计算。

相反，正如 @Richard Ansell 指出的那样，如果您不熟悉类之外的内容，则应使用 withStyles。这是一个 高阶组件。建议在较新的代码库中，学习 hooks 并逐渐适应它们，因为当您熟练掌握 hooks 时，它们可以代表来自 HOC 和组件的几乎所有功能。

以下是来自 material-ui 文档（请参阅此处）的示例：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const styles = {
  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 HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

- rob2d

Answer 2

从我所了解的情况来看，你可以简单地使用 withStyles API 来包装你的组件，并将样式直接注入到导出的组件中。请参阅以下页面，其中会更详细地解释这一点：withStyles。 示例：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const styles = {
    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',
        padding: '0 30px',
    },
};

function HigherOrderComponent(props) {
    const { classes, customHeight } = props;
    return <Button className={classes.root} style={{minHeight: customHeight, maxHeight: customHeight}}>Higher-order 
    component</Button>;
}

HigherOrderComponent.propTypes = {
    classes: PropTypes.object.isRequired,
    customHeight: PropTypes.object.isRequired
};

export default withStyles(styles)(HigherOrderComponent);

- Richard Ansell

---

请参考上面的示例，它展示了如何导出一个应用了样式的React组件，希望这能帮到你。 - Richard Ansell

请检查我的示例，我想在 CSS 中动态更改高度（const {height} = this.props），它必须在类内部。 - Andrey Radkevich

我已经更新了我的答案，展示了如何动态传递高度。这似乎是React Material UI的某种限制，但上述方法应该允许您将按钮大小设置为所需的必需属性。 - Richard Ansell

没错，你可以选择任何一种方式，尽管 props 在类外部是不可访问的，所以这是你传递自定义参数的唯一方式。 - Richard Ansell

给出了一个详细的答案，解释了一些内容。建议阅读文档。 - rob2d