JSS - Как оформить вложенный ребенок?

Question

У меня есть список, и я хочу стилизовать вложенный элемент list-item от родителя.Как я могу получить доступ к вложенному элементу?Приведенный ниже код не работает.

реагирует на js-разметку

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

JSS

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

    "li": {
      "&:first-child": {
        "& $box": {
          color: 'red',
          border: 'solid',
         }
      }
    }
  },

Answer 1

Есть небольшие изменения в том, как вы defining your styles object, которые могут запустить ваш код.Для вложенных элементов вам нужно отделить & и имя класса или элемент dom с помощью space

объект рабочего стиля:

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

    }
  }
})

рабочий демо

Answer 2

Надеюсь, это поможет:

JSS

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

И вы получили небольшую ошибку при печати.Это должно быть "className" с большой буквы "N".

Привет