Styled Components：同时嵌套和引用其他组件

Question

<FooterLight transparent={true}/>

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

接下来两个问题：

因为 color: white !important 对于 ChangelogVersion 和 CopyRight 是相同的。这些可以合并在一个语句中吗？
不使用 !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 存在的理由，所以很难提供建议。

Styled Components：同时嵌套和引用其他组件

Styled Components: nesting and referring to other components at the same time

javascript

css

reactjs

styled-components