將條件 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 });