Reactjs JSS-如何设置嵌套子级的样式？

我有一个列表，想从父列表中设置列表项的嵌套元素的样式。如何访问嵌套元素？下面的代码不起作用

加价

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

我希望这有助于：

JSS

你有点打字错误。它应该是带有大写字母“N”的“className”

---

问候语

在定义样式对象的方式上有一些细微的变化可以让代码运行。对于嵌套元素，您需要通过

空格

工作方式对象：

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

    }
  }
})

---

谢谢，但是box类名称是style对象的一部分，我在上面对其进行了更新。我想你的解决方案是访问一个字符串classname我在看到这个后编辑了我的答案。只要换一个新的。使用$，它应该可以工作：）

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

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

    }
  }
})