样式化组件中的比较语句

Question

它是一个常规查询。 在普通的CSS中，我们可以这样写：

.container > div {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

但是如何在使用样式化的组件库时实现相同的代码？

Answer 1

要定位Container组件的直接子div元素，您需要使用${Container} > & {}来定义这些样式。这是一个示例，其中我根据div是否为Container组件的直接子元素来设置颜色，字体大小，弹性和宽度的单独样式。

// Define the Container element styles
const Container = styled.div`
    font-size: 16px;
`;

// Define the ChildDiv element styles
const ChildDiv = styled.div`
    width: 50%;
    flex: 2;
    font-size: .5em;
    color: green;
    ${Container} > & {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        color: purple;
    }
`;

// Render components
render(
  <Container>
    <ChildDiv>
      This div is an immediate child of Container
      <ChildDiv>
        This div is NOT an immediate child of Container
      </ChildDiv>
    </ChildDiv>
  </Container>
);