javascript - 样式化组件 : nesting and referring to other components at the same time

Question

<FooterLight transparent={true}/>

是否有可能在 FooterLight 的定义中有一个嵌套规则，为其评估 Prop 值透明。然后它将“颜色:白色”分配给它的子 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 ...在您的示例中，没有任何important 存在的理由，因此很难提供建议。