如何在JS中使用CSS来实现嵌套悬停样式，Material UI [英] how to use css in JS for nested hover styles, Material UI

问题描述

我正在使用Material UI，并尝试将普通的CSS类转换为js文件.

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>

如何在材料ui模式中转换这些css样式.我没有看到有关如何为元素设置活动"状态和嵌套悬停样式的任何示例.与此类高级方案相关的更多文档会有所帮助.

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',
    }
});

如何将其转换为材料样式 .navLink:hover> div:hover {

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

我尝试过的事情.

navLink: {

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

    },

感谢您的帮助.

推荐答案

正确的语法是"&: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"
      }
    }
  }
});

这里是相关的JSS文档: https://cssinjs.org/jss-plugin-nested/?v=v10.0.0-alpha.24

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

相关答案:

• 查看全文