reactjs - React：如何通过名称引用样式组件的子项

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