Convert from css to makestyle material UI-CodePudding

I want to add an iconButton and display a website preview when the mouse hover the help icon. I found something similar using css but I need to convert that to material UI. This is the css code to be converted from this post How to show live preview in a small popup of linked page on mouse over on link?

.box{
    display: none;
    width: 100%;
}

a:hover   .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}

This is what I have so far:

const HoverText = () => {
        return (
            <div className={classes.box}>
                <iframe src="https://en.wikipedia.org/" width="500px" height="500px">
                </iframe>
            </div>
        );
    };

    return (
        <>
            <IconButton size="large" color="inherit" onClick={() => window.open("https://en.wikipedia.org/", "_blank")}>
                <HelpIcon className={classes.act} />
                <HoverText />
            </IconButton>
        </>
    );

Could you please help me to fix this:

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        box: {
            width: '100%',
            display: 'none'
        },
        act: {
            "&:hover   .box, .box:hover": {
                display: 'block',
                position: 'relative',
                zIndex: 100
            }
        }
    }),
);

Im expect to display a preview of a website page when mouse is over the icon.

CodePudding user response：

Use $box instead of .box.

There is no box class generated when you compile your code (You can inspect your code and see what it compiles to). So the .box class selector does not work because there is no box class.

You should use $ to select another local rule or class within the same stylesheet. Read more.

"&:hover   $box, $box:hover"

CodePudding user response：

You have to use the $ character when referencing another rule name. I changed a code a bit, use classes.act on IconButton (the hover effect will be better), and use the following:

const useStyles = makeStyles(() =>
  createStyles({
    box: {
      width: 0,
      height: 0,
      display: "none"
    },
    act: {
      "&:hover $box": {
        display: "block",
        zIndex: 100
      }
    }
  })
);