Реагируйте: как обратиться к потомку стилевого компонента по его имени

Question

Есть ли способ ссылаться на подкомпонент styled-component по его имени? Или, кроме передачи жестко закодированного className и ссылки на него, вместо этого нет никакого способа обойтись?

const Parent = styled.div`
  // some styles

  & > Child1 {
    opacity: 1;
  }

`;

const Child1 = styled.div`
  opacity: 0;
`;

const Child2 = styled.div`
  opacity: 0;
`;


const App = (props: Props) => (
  <Parent>
    <Child1 />
    <Child2 />
  </Parent>
)

Answer 1

Хмм, у вас ${} отсутствует в ваших стилях.Также вы можете разместить const Parent после объявления Child1.

const Child1 = styled.div`
  opacity: 0;
`;

const Child2 = styled.div`
  opacity: 0;
`;

const Parent = styled.div`
  // some styles

  & > ${Child1} {
    opacity: 1;
  }

`;


const App = (props: Props) => (
  <Parent>
    <Child1 />
    <Child2 />
  </Parent>
)

Если вы хотите узнать больше о template literals, вот ссылка.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals