Question

<FooterLight transparent={true}/>

是否可以在FooterLight的定义中使用嵌套规则来评估props值的透明度。然后它分配颜色：白色＆＃39;给它的孩子ChangelogVersion和CopyRight？

接下来的两个问题：

由于color：white！important与ChangelogVersion和CopyRight相同。这些可以在一个声明中合并在一起吗？
＆amp;＆amp;＆amp;工作不使用！重要吗？

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没有任何理由存在，所以很难提出建议。

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

1 个答案: