web-dev-qa-db-ja.com

makeStylesを使用するマテリアルUIで、要素に両方のクラスがある場合にのみ適用されるCSSルールを記述できますか？

CSSでこれを実行できることを知っています。

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

Material-UIでこれを行うことができるかどうかを知りたいので、いわば2つの個別のスタイルシート（MaterialUI ReactApp用とHTMLタグでリンクされているものの1つ）を用意する必要はありません。

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で2つのクラスをつなぎ合わせようとしただけで、エラーが発生しました。

javascriptcssreactjsmaterial-ui
3
Sankofa

私はそれを見つけたかもしれないと思います（広範なラバーダッキング）

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

私の他のコードの一部は壊れているので、これを確認するにはしばらく時間がかかります。

0
Sankofa

他の回答は、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>
0
Sankofa