Question

在这里您可以看到在react组件之外使用材质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的正确版本，但是我还没有找到人们在类makeStyles中使用它的任何示例

Answer 1

据我所知，您可以简单地使用withStyles API，该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);

Answer 2

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

使用钩子来完全替换类，因为为了进行编译器优化和其他低级别的事情，React朝纯功能组件的方向发展了更多（尽管对于开发人员来说是外部的好处，例如不那么冗长和费力。更好的优势，并且对JS的功能特性更加直观）。对于makeStyles，您将获得其他好处，例如能够使用 any 变量（包括传统上是props和state的变量），并且JSS会自动仅根据您提供的可观察参数与任何道具更改时的情况。

相反，正如@Richard Ansell指出的那样，如果您不喜欢上课，则应该使用withStyles。这是High Order Component。会建议您，尽管在较新的代码库中，您将学习钩子并适应钩子，因为当您变得更好时，钩子可以代表HOC和组件的几乎所有功能。

下面是material-ui文档（RTFM here）中给出的示例：

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);

React组件内部的材料ui样式

2 个答案: