Есть ли способ нацелить вложенный компонент в стиле JSS в другой компонент в стиле JSS? [JSS-nested / Styled-JSS / Material UI (React)]

Можно ли настроить таргетинг на стилизованный объект JSS в другом стилизованном объекте JSS таким же образом, как это позволяют стилизованные компоненты?

Вот пример того, о чем я говорю со стилизованными компонентами:

const Child = styled.div`
  color: red;
`;

const Parent = styled.div`
  display: flex;
  ${Child}:hover {
    color: blue
  }
`;

Возможно ли это в JSS?

К вашему сведению, я использую решение для стилизации Material UI v4, основанное на JSS.


reactjs material-ui styled-components css-in-js jss
person brw.064    schedule 04.02.2021    source источник
comment
Я мог ошибаться, но я не думал, что вы можете использовать обратную кавычку с API в стиле MUI   -  person Barryman9000    schedule 05.02.2021
comment
@ Barryman9000 Приведенный мною пример кода написан без использования API в стиле JSS / MUI. Он использует стилизованные компоненты, чтобы проиллюстрировать, чего я хотел бы достичь с помощью стилизованного API JSS / MUI.   -  person brw.064    schedule 05.02.2021

Ответы (2)


arrow_upward
0
arrow_downward

используйте & амперсанды вместе со скобками [] для выполнения этого в JSS:

const Child = styled(div)({
  color: 'red',
});

const Parent = styled(div)({
  display: 'flex',
  [`& ${Child}:hover`]: {
    color: 'blue'
  }
});
person buzatto    schedule 05.02.2021

arrow_upward
0
arrow_downward

Вы можете передать свой дочерний компонент в API родительского стиля.

const Child = styled("div")({
  color: '#fff'
});
const Parent = styled(Child)({
  background: '#999'
})

ОБНОВЛЕНИЕ

Да, я неправильно понял. Я не думаю, что вы можете сделать это только с помощью MUI styled API? Самое близкое, что я мог найти, это использование className prop (или вы можете использовать классы для компонентов MUI)

const Parent = styled('div')({
  background: '#999',
  '& .warning': {
    '&:hover': {
      color: 'goldenrod'
    }
  },
  '& .error': {
    '&:hover': {
      color: 'red'
    }
  }
})

<Parent>
  <Child className="warning">Warning!</Child>
  <Child className="error">Error!</Child>
</Parent>
person Barryman9000    schedule 05.02.2021
comment
Спасибо за предложение, но я ищу способ настроить таргетинг на вложенные экземпляры Child, которые можно найти в Parent. Если я чего-то не упускаю, похоже, что приведенный вами пример создает стилизованную версию Child с именем Parent. - person brw.064; 05.02.2021