Question

有没有一种方法可以通过名称来引用样式化组件的子组件？或者，除了传递硬编码的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

React：如何通过样式名称来引用样式组件的子代

1 个答案: