在 React 中将条件样式应用于组件 - 内联 CSS答案

【问题标题】：Applying conditional styles to a component in React - Inline CSS在 React 中将条件样式应用于组件 - 内联 CSS
【发布时间】：2020-08-12 02:56:39
【问题描述】：

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

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

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

我在这个SANDBOX中有一个例子

还有这里复制的主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);

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

【问题讨论】：

请查看material-ui.com/api/button 页面以了解如何定位
那个帖子解决了你的问题吗？请提供一些反馈将不胜感激。

标签： javascript css reactjs material-ui

【解决方案1】：

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

基于用户行为的条件样式

我猜你当前的需求是在它悬停的时候。

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

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

withStyles 无权访问这些属性。

参考：issue: Can withStyles pass props to 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)();

【讨论】：

【解决方案2】：

作为对@keikai 的响应，您还可以将一个对象传递给styles() 钩子（我只是通过传递道具得到了一个错误）。

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

const classes = useStyles({ size });

【讨论】：