I am trying to style some buttons based on whether they are 'active' or not, and also whether or not the use is hovering the mouse over them.

It works to some extent, however, it's behaving in a way that I don't fully understand.

How do I apply a conditional style to a ponent, based on its state, as well as based on user behavior?

I have an example in this SANDBOX

And the main JS file copied here:

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);

There are two rows. The second row picks up the styles just fine. The first row will only adhere when the button is clicked. I want to be able to set the state based on whether the current button is active (ie. state == buttonNumber), and also whether or not the user is hovering over any of the buttons.

I am trying to style some buttons based on whether they are 'active' or not, and also whether or not the use is hovering the mouse over them.

It works to some extent, however, it's behaving in a way that I don't fully understand.

How do I apply a conditional style to a ponent, based on its state, as well as based on user behavior?

I have an example in this SANDBOX

And the main JS file copied here:

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);

There are two rows. The second row picks up the styles just fine. The first row will only adhere when the button is clicked. I want to be able to set the state based on whether the current button is active (ie. state == buttonNumber), and also whether or not the user is hovering over any of the buttons.

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow edited Apr 28, 2020 at 11:38 keikai 15.2k1010 gold badges5555 silver badges7272 bronze badges asked Apr 28, 2020 at 10:13 TylerTyler 1,28322 gold badges2121 silver badges4444 bronze badges 2

• please checkout material-ui./api/button page to know how to target specific part of <Button> ponents. – Gulam Hussain Commented Apr 28, 2020 at 10:20
• Did that post solve your problem? Kindly give some feedback would be appreciated. – keikai Commented May 1, 2020 at 7:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

How do I apply a conditional style to a ponent, based on its state, as well as based on user behavior?

---

For conditional style based on user behavior

I guess your current demand is when it's hovering.

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

---

For conditional style based on params(props)

withStyles doesn't have access to the properties.

• refer: issue: Can withStyles pass props to styles object? #8726

---

But there are multiple work-around solutions

1.use injectSheet HOC

notice that the useStyles in your code is actually not a hook

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

or

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

with

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

export default withStyles(styles)(CustomFeature);

2.use style hooks with params (for functional ponents)

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

const classes = useStyles();

or

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

const classes = useStyles(whateverParamsYouWant)();

In response to @keikai you can also pass in an object into the styles() hook (I was getting an error by just passing in props).

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

const classes = useStyles({ size });