Пользовательский интерфейс материала и React & hover selector не работают - PullRequest
Новая
       91

Пользовательский интерфейс материала и React & hover selector не работают

1 голос
/ 01 мая 2020

У меня есть этот код, в котором селектор наведения не работает вообще. Все остальное, что касается стиля, работает отлично, но зависание не делает ничего видимого. 

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, чтобы внести изменения?

1 Ответ

1 голос
/ 01 мая 2020

если вы хотите использовать стиль наведения, вы можете использовать пакет

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

Рабочая демоверсия

...