JSS - 如何设置嵌套子项的样式?

问题描述 投票:1回答:2

我有一个列表,并希望从父级设置列表项的嵌套元素。我如何访问嵌套元素?下面的代码不起作用。

反应js标记

<ul classname={classes.list}>
   <li>
     <span className={classes.box}> my box </span>
   </li>
   <li>
     <span className={classes.box}>second box </span>
   </li>
</ul>

玩笑

const styles = () => ({
  box: {
    background: 'red',
  },
  list: {
    listStyle: "none",

    "li": {
      "&:first-child": {
        "& $box": {
          color: 'red',
          border: 'solid',
         }
      }
    }
  },
reactjs jss
2个回答
4
投票

defining your styles object如何让你的代码运行有一些细微的变化。对于嵌套元素,您需要通过space分隔&和classname或dom项目

工作方式对象:

const styles = () => ({
  box: {
    background: 'red',
  },
  list: {
    listStyle: "none",
    '& li': {
      '&:first-child': {
        '& $box': {
          border: 'solid',
        }
      }

    }
  }
})

working demo


1
投票

我希望这有帮助:

玩笑

list: {
    listStyle: "none",  
    '& li:first-child $box': {
      background: 'blue'
    }
  }

你有一点打字错误。它应该是“className”,大写字母为“N”。

问候

© www.soinside.com 2019 - 2024. All rights reserved.