Применение условных стилей к компоненту в React - Inline CSS

Question

Я пытаюсь стилизовать некоторые кнопки в зависимости от того, являются ли они «активными» или нет, а также от того, надвигается ли на них мышь или нет.

Это работает до некоторой степени, однако ведет себя так, что я не до конца понимаю.

Как применить условный стиль к компоненту на основе его состояния, а также поведения пользователя?

У меня есть пример в этом 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);

Есть две строки. Второй ряд прекрасно подбирает стили. Первый ряд будет придерживаться только при нажатии кнопки. Я хочу иметь возможность установить состояние в зависимости от того, активна ли текущая кнопка (ie. State == buttonNumber), а также от того, наводит ли пользователь курсор на любую из кнопок.

Answer 1

Как применить условный стиль к компоненту на основе его состояния, а также на основе поведения пользователя?

---

Для условного стиля на основе поведения пользователя

Я полагаю, ваше текущее требование - когда оно зависло.

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

---

Для условного стиля, основанного на параметрах (реквизитах)

withStyles не имеет доступа к Свойства.

• См .: Проблема: Может ли withStyles передавать реквизиты объекту стилей? # 8726

---

Но есть несколько обходных решений

1.use injectSheet HO C

обратите внимание, что 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)();