将条件样式应用于 React 中的组件 - 内联 CSS

Question

我正在尝试根据某些按钮是否“活动”以及是否将鼠标悬停在它们上来设置它们的样式。

它在某种程度上有效，但是，它的行为方式我并不完全理解。

如何根据组件的状态以及用户行为将条件样式应用于组件？

我在这个沙盒中有一个例子

主 JS 文件复制到这里：

demo.js

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

const useStyles = theme => ({
  root: {
    backgroundColor: theme.palette.secondary.paper,
    width: 500
  },
  pageButton: {
    backgroundColor: "black",
    color: "blue",
    width: 30,
    minWidth: 20,
    "&:hover": {
      backgroundColor: "green"
    }
  },
  normalButton: {
    width: 30,
    minWidth: 20,
    backgroundColour: "red"
  }
});

class Feature extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentPage: 0 };
  }
  handleClick(page) {
    this.setState({ currentPage: page });
  }

  fetchPageNumbers() {
    return [1, 2, 3];
  }
  render() {
    const classes = this.props.classes;
    return (
      <div className={classes.root}>
        {this.fetchPageNumbers().map((page, index) => {
          return (
            <div>
              <Button
                onClick={() => this.handleClick(page)}
                key={page}
                className={
                  this.state.currentPage === page
                    ? classes.pageButton
                    : classes.normalbutton
                }
              >
                {page}
              </Button>

              <Button
                onClick={() => {}}
                key={page * 20}
                className={classes.normalButton}
              >
                {page * 20}
              </Button>
            </div>
          );
        })}
      </div>
    );
  }
}

Feature.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(useStyles)(Feature);

有两行。第二行的风格很好。仅当单击按钮时才会粘附第一行。我希望能够根据当前按钮是否处于活动状态（即状态==按钮编号）以及用户是否将鼠标悬停在任何按钮上来设置状态。

Answer 1

如何根据组件的状态以及用户行为将条件样式应用于组件？

用于基于用户行为的条件样式

我猜你现在的需求是在徘徊的时候。

"&:hover": {
  // Hover styles
}

对于基于 params(props) 的条件样式

withStyles 无权访问属性。

• 参考：问题： withStyles 可以将 props 传递给 styles 对象吗？第8726章

但有多种解决方案

1.使用injectSheet HOC

请注意，useStyles您代码中的 实际上不是一个钩子

const styles = props => ({
  root: {
    width: props.size === 'big' ? '100px' : '20px'
  }
})

或者

const styles = {
  root: {
    width: props => props.size === 'big' ? '100px' : '20px'
  }
}

和

const CustomFeature = ({size, classes}) => <Feature className={classes.root} />;

export default withStyles(styles)(CustomFeature);

2.使用带有参数的样式钩子（对于功能组件）

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
  root: {
    width: props => props .size === "big" ? "100px" : "20px"
  }
}));

const classes = useStyles();

或者

import { makeStyles } from "@material-ui/core/styles";
const useStyles = params =>
  makeStyles(theme => ({
    root: {
      width: params.size === "big" ? "100px" : "20px"
    }
  }));

const classes = useStyles(whateverParamsYouWant)();