Question

我有这段代码，其中的悬停选择器根本不起作用。在样式方面，其他所有功能都可以正常工作，但是悬停不会做任何可见的事情。

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;

如何使悬停选择器起作用。我需要使用React的状态来进行更改吗？

Answer 1

如果要使用悬停样式，则可以使用包

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

代码如下：

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

材质UI和React＆hover选择器不起作用

1 个答案: