样式化组件：同时嵌套和引用其他组件

Question

<FooterLight transparent={true}/>

是否可以在 FooterLight 的定义中有一个嵌套规则，用于评估 props 值透明。然后将'color: white'分配给它的子ChangelogVersion和CopyRight？

接下来的两个问题：

1. 因为 color: white !important 对于 ChangelogVersion 和 CopyRight 是相同的。可以将它们合并到一个语句中吗？
2. &&& 可以不使用 !important 吗？

---

export const FooterLight = styled(Navbar).attrs({fixed: 'bottom'})`
  background-color: ${props => props.transparent
  ? 'transparent'
  : 'white'};

  ${props => props.transparent && ChangelogVersion} {
    color: white !important;
  }

  ${props => props.transparent && CopyRight} {
    color: white !important;
  }
`


export const ChangelogVersion = styled(NavLink)`
  &&& {
    font-size: 14px !important;
    padding-right: .5rem;
  }
`

export const CopyRight = styled.div `
  padding: .5rem 0;
  color: '#777777';
  font-size: 14px;
}

Answer 1

当然可以……你可以这样做：

export const FooterLight = styled(Navbar).attrs({fixed: 'bottom'})`
    background-color: ${props => props.transparent
    ? 'transparent'
    : 'white'};

    ${ChangelogVersion}, ${CopyRight} {
         ${props => props.transparent && "color: white !important;"}
    }
`

至于您的第二个陈述，&&& 可能有效，但您最好更好地构建 CSS，因此它不需要首先是 !important...在您的示例中，没有理由任何importants 都在那里，所以很难提供建议。