Material UI and React &hover selector not working

Question

I have this code in which the hover selector doesn't work at all. Everything else when it comes to style works perfectly but the hover doesn't do anything visible.

import React from "react";
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const styles = {
    divStyle: {
        width: "300px",
        height: "200px",
        backgroundColor: "red",
        margin: "30px",
        '&:hover': {
            border: '5px solid #000000',
            bordeBottomColor: 'transparent',
            borderRightColor: 'transparent'
        }
    }
};

const StartPage = ()=> {

    return(
        <React.Fragment>
             <Paper>
                <div style={styles.firstContainer}>
                </div>
                <div style={styles.secondContainer}>
                    <Grid container >
                        <Grid style={styles.Grid} item>
                            <div style={styles.gridDivStyle}>
                                <div style={styles.divStyle}></div>
                                <div style={styles.divStyle}></div>
                            </div>
                           <div style={styles.gridDivStyle}>
                                <div style={styles.divStyle}></div>
                                <div style={styles.divStyle}></div>
                            </div>
                        </Grid>
                    </Grid>
                </div>
                <div style={styles.lastContainer}>
                </div>
             </Paper>
        </React.Fragment>
    );

}

export default StartPage;

How can I make the hover selector work. Do I need to use the state from React in order to make the change?

Jagrati · Accepted Answer · 2020-05-01 17:02:39Z

if you want to use hover style , you can use the package

import { withStyles } from 'material-ui/styles';

Here is the code:

import React from "react";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import { withStyles } from "@material-ui/styles";
const styles = {
  divStyle: {
    width: "300px",
    height: "200px",
    backgroundColor: "red",
    margin: "30px",
    "&:hover": {
      border: "5px solid #000000",
      bordeBottomColor: "transparent",
      borderRightColor: "transparent"
    }
  }
};

const StartPage = props => {
  return (
    <React.Fragment>
      <Paper>
        <div style={styles.firstContainer} />
        <div style={styles.secondContainer}>
          <Grid container>
            <Grid style={styles.Grid} item>
              <div style={styles.gridDivStyle}>
                <div className={props.classes.divStyle} /> // use the styles through className
                <div className={props.classes.divStyle} />
              </div>
              <div style={styles.gridDivStyle}>
                <div className={props.classes.divStyle} />
                <div className={props.classes.divStyle} />
              </div>
            </Grid>
          </Grid>
        </div>
        <div style={styles.lastContainer} />
      </Paper>
    </React.Fragment>
  );
};

export default withStyles(styles)(StartPage);

Working Demo

Collectives™ on Stack Overflow

Material UI and React &hover selector not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related