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

Question

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

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

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

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

并将主 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);

有两排。 第二行拿起 styles 就好了。 仅当单击按钮时，第一行才会坚持。 我希望能够根据当前按钮是否处于活动状态（即 state == buttonNumber）以及用户是否将鼠标悬停在任何按钮上来设置 state。

Answer 1

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

---

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

我猜你当前的需求是它在徘徊的时候。

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

---

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

withStyles 无权访问这些属性。

• 参考：问题：withStyles 可以将道具传递给 styles object 吗？ #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)();

Answer 2

作为对@keikai 的回应，您还可以将 object 传递到styles()钩子中（我只是通过传递道具而得到错误）。

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

const classes = useStyles({ size });