how to use css in JS for nested hover styles, Material UI

Question

I'm using Material UI and trying to convert normal css classes into js file.

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.navItem {
    float: left;
    flex: 1;
}

.navLink {
    color: white;
    text-decoration: none;
    display: block;
    font-size: '1 rem';
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: '0.0075em';
    opacity: 1;
    text-transform: 'none';
    min-width: 0;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.navLink-static {
    color: white;
    text-decoration: none;
    display: block;
    font-size: '1rem';
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: '0.0075em';
    opacity: 1;
    text-transform: 'none';
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.navLink:hover {
    border-bottom: 2px solid mediumvioletred;
    background: #8DB8DD;
    cursor: pointer;
}

 .navLink:hover > div:hover {
      border-bottom: none;
 }

.navLink.active {
    font-weight: 600;
    border-radius: 0;
    border-color: transparent;
    border-bottom: 3px solid orange;
    padding-bottom: 10px;
}

<ul className={classes.nav}>
    <li className={classes.navItem}>
        <NavLink className={classes.navLink} to="/" exact>
            abc
        </NavLink>
    </li>
    <li className={classes.navItem}>
        <NavLink className={classes.navLink} to="/def" exact>
            def
        </NavLink>
    </li>
    <li className={classes.navItem}>
        <NavLink className={classes.navLink} to="/ghi">
            ghi
        </NavLink>
    </li>
</ul>

How do I convert these css styles in material ui pattern. I do not see any examples on how to set 'active' state and nested hover style for an element. More documentation related to this kind of advance scenarios helps.

Here is how much further I've gone in converting these..


const styles = theme => ({
    nav: {
        listStyleType: 'none',
        margin: 0,
        padding: 0,
        overflow: 'hidden'
    },
    navItem: {
        float: 'left',
        flex: 1
    },
    navLink: {
        color: 'white',
        textDecoration: 'none',
        display: 'block',
        fontSize: '1rem',
        fontWeight: 500,
        lineHeight: 1.6,
        letterSpacing: '0.0075em',
        opacity: 1,
        textTransform: 'none',
        minWidth: 0,
        padding: '10px',
        marginLeft: '10px',
        marginRight: '10px',
        '&:hover': {
            borderBottom: '2px solid mediumvioletred',
            background: '#8DB8DD',
            cursor: 'pointer',
            // '& div': {
            //     '&:hover': {
            //         borderBottom: 'none',
            //     }
            // },
            '&> div &:hover': {
                borderBottom: 'none',
            }
        },
        // 'div:hover': {
        //     borderBottom: 'none',
        // },

    },
    navLinkStatic: {
        color: 'white',
        textDecoration: 'none',
        display: 'block',
        fontSize: '1rem',
        fontWeight: 500,
        lineHeight: 1.6,
        letterSpacing: '0.0075em',
        opacity: 1,
        textTransform: 'none',
        padding: '10px',
        marginLeft: '10px',
        marginRight: '10px',
    }
});

How can I convert this into material style .navLink:hover > div:hover {

Things I have tried.


navLink: {

        '&:hover': {
            borderBottom: '2px solid mediumvioletred',
            background: '#8DB8DD',
            cursor: 'pointer',
            // '& div': {
            //     '&:hover': {
            //         borderBottom: 'none',
            //     }
            // },
            // '&> div &:hover': {
            //     borderBottom: 'none',
            // }
        },
        '&:hover > div:hover': {
            borderBottom: 'none'
        }

    },

any help is appreciated.

have you tried navLink: { '&:hover > div:hover' { } }?

Jörn
– Jörn

2019-08-29 19:54:33 +00:00
Commented Aug 29, 2019 at 19:54 — Jörn
– Jörn, Commented Aug 29, 2019 at 19:54
@Jörn yes, did not work.

hashbytes
– hashbytes

2019-08-29 20:06:40 +00:00
Commented Aug 29, 2019 at 20:06 — hashbytes
– hashbytes, Commented Aug 29, 2019 at 20:06

Ryan Cogswell · Accepted Answer · 2020-02-19 15:33:46Z

13

The correct syntax is "&:hover > div:hover": { ... }.

Here is a working example demonstrating the syntax:

import React from "react";
import ReactDOM from "react-dom";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  navlink: {
    border: "1px solid green",
    fontSize: "16pt",
    "&:hover": {
      backgroundColor: "lightgreen"
    },
    "&:hover > div:hover": {
      backgroundColor: "lightblue"
    }
  }
});
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <div className={classes.navlink}>
        Hello <div>CodeSandbox</div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

It also works to deeply nest with this syntax:

const useStyles = makeStyles({
  navlink: {
    border: "1px solid green",
    fontSize: "16pt",
    "&:hover": {
      backgroundColor: "lightgreen",
      "& > div:hover": {
        backgroundColor: "lightblue"
      }
    }
  }
});

Here is the relevant JSS documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.0-alpha.24

1 Comment

Mike K Over a year ago

How would you select another object? Such as an onHover effect, const useStyles = makeStyles({ elementA: { color: 'blue' }, elementB: { "&:hover $elementA": { color: 'ref' } } });, where onHover on elementB, I want to change the color of elementA from blue to red?

Collectives™ on Stack Overflow

how to use css in JS for nested hover styles, Material UI

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related