在使用makeStyles的材质ui中，是否可以编写一个仅在元素同时具有两个类时才适用的css规则？

Question

我知道我可以在 CSS 中做到这一点。

.makeStyles-mainNavWrapper-67.sticky{
  position: fixed;
  top: 0px;
  opacity: 1;
  transition: opacity 1s ease;
  padding: 10px;
}

我想知道我是否可以在 Material-UI 中执行此操作，这样我就不必拥有两个单独的样式表（一个用于 MaterialUI ReactApp，一个用于链接在 HTML 标记中。

const Header = (props) => {
  const useStyles = makeStyles(theme => ({
    mainNav: {
      zIndex: '3',
      color: 'white',
      textAlign: 'right',
      marginRight: '10%'
    },
    mainNavWrapper: {
      paddingTop: '2%',
      background: 'rgba(0,0,0,0.8)'
    },
    mainNavWrapper.sticky: {
       I know this does not work. Is it possible?
    },

我试图在 MaterialUI 中将两个类串在一起，但出现错误。

Answer 1

我找到了答案。我必须导入 react-jss 包并遵循他们的文档。我现在可以使用 jssNested 语法并访问嵌套元素并编写仅在有两个类附加到元素时才适用的规则。

这里是：

import React from 'react'
import { render } from 'react-dom'
// Import React-JSS
import injectSheet from 'react-jss'

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const styles = {
  mainNav: {
    zIndex: '3',
    color: 'white',
    textAlign: 'right',
    marginRight: '10%',
    '& ul': {
      zIndex: '2',
      textAlign: 'right',
      listStyleType: 'none',
      margin: '0px',
    }
  },
  li: {
    '& a': {
      color: 'white'
    }
  },
  mainNavWrapper: {
    paddingTop: '2%',
    background: 'rgba(0,0,0,0.8)',
    width: '100%',
    opacity: '1',
    transition: 'width 2s ease',
    padding: '10px',
    '&.sticky': {
      // jss-nested applies this to a child span
      fontWeight: 'bold' // jss-camel-case turns this into 'font-weight'
    },
    '&.scrolling': {
      opacity: '0',
      position: 'absolute',
      transition: 'opacity 1s ease'
    }
  },
  myLabel: {
    fontStyle: 'italic'
  }
}

// Define the component using these styles and pass it the 'classes' prop.
// Use this to assign scoped class names.
const Button = ({ classes, children }) => (
  <div className={classes.mainNavWrapper}>

    <nav className={classes.mainNav}>
      <ul className={classes.ul}>
        <li className={classes.li} ><a href="#" >home</a></li>
        <li className={classes.li}><a href="#">about us</a></li>
        <li className={classes.li}><a href="#">packages</a></li>
        <li className={classes.li}><a href="#">reviews</a></li>
        <li className={classes.li}><a href="#" className={classes.current}>contact us</a></li>
      </ul>
    </nav>
  </div>
)

// Finally, inject the stylesheet into the component.
const Test = injectSheet(styles)(Button)

export default Test;

Answer 2

我想我可能已经找到了（广泛的橡皮鸭）

https://github.com/cssinjs/jss-nested

const styles = {
  container: {
    padding: 20,
    '&:hover': {
      background: 'blue'
    },
    // Add a global .clear class to the container.
    '&.clear': {
      clear: 'both'
    },
    // Reference a global .button scoped to the container.
    '& .button': {
      background: 'red'
    },
    // Use multiple container refs in one selector
    '&.selected, &.active': {
      border: '1px solid red'
    }
  }
}

遵守：

.container-3775999496 {
  padding: 20px;
}
.container-3775999496:hover {
  background: blue;
}
.container-3775999496.clear {
  clear: both;
}
.container-3775999496 .button {
  background: red;
}
.container-3775999496.selected, .container-3775999496.active {
  border: 1px solid red;
}

我的其他一些代码已损坏，因此需要一些时间来验证。

Answer 3

我留下了另一个答案，因为它展示了如何使用 react-jss 解决这个问题。你可以在 MaterialUI 中使用 makeStyles 做同样的事情。我一定是在某个地方出现了语法错误，导致我的 css 规则都没有生效。

这里是makeStyles方式，这里还有一些断点代码可以启动：

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

const Header = () => {

  const useStyles = makeStyles(theme => ({
    root: {
      padding: theme.spacing(1),
      [theme.breakpoints.down('sm')]: {
        backgroundColor: 'red',
      },
      [theme.breakpoints.up('md')]: {
        backgroundColor: 'blue',
      },
      [theme.breakpoints.up('lg')]: {
        backgroundColor: 'green',
      },
    },
    mainNav: {
      zIndex: '3',
      color: 'white',
      textAlign: 'right',
      marginRight: '10%',
      '& ul': {
        zIndex: '2',
        textAlign: 'right',
        listStyleType: 'none',
        margin: '0px',
      }
    },
    li: {
      display: 'inline-block',
      marginLeft: '3%',
      '& a': {
        color: 'white',
        textDecoration: 'none',
        marginRight: '10px',
        padding: '10px',
        '&:hover': {
          background: '#3498db'
        }
      }
    },
    mainNavWrapper: {
      background: 'rgba(0,0,0,1)',
      width: '100%',
      opacity: '1',
      transition: 'width 2s ease',
      padding: '10px',
      position: 'fixed',
      zIndex: 1,
      '&.sticky': {
        position: 'fixed',
        top: '0px',
        opacity: '1',
        transition: 'opacity 2s ease',
        padding: '10px',
        zIndex: 1
      },
      '&.scrolling': {
        opacity: '0',
        position: 'fixed',
        transition: 'opacity 30ms ease'
      }
    },
...
in the functional component's return ():
 <div className={classes.root}>

      <div className={classes.mainNavWrapper}>

        <nav className={classes.mainNav}>
          <ul className={classes.ul}>
            <li className={classes.li}><a href="#" >home</a></li>
            <li className={classes.li}><a href="#">about us</a></li>
            <li className={classes.li}><a href="#">packages</a></li>
            <li className={classes.li}><a href="#">reviews</a></li>
            <li className={classes.li}><a href="#" className={classes.current}>contact us</a></li>
          </ul>
        </nav>

      </div>
</div>