使许多样式化的组件属性依赖于 prop答案

【问题标题】：make many styled component properties dependent on prop使许多样式化的组件属性依赖于 prop
【发布时间】：2019-05-23 19:50:59
【问题描述】：

我喜欢你能做到的事情

color: ${p=>p.active ? 'red' : 'green'}

但是对于一个以上的属性，这种语法有点失控

${
  p => p.active ? (
    `
      color: ${p.theme.red};
      text-decoration: underline;
    `
  ):(
  ``
  )
}

与更好的类名语法相比

&.active{
 color: ${p => p.theme.red}
 text-decoration: underline;
}

然而，有条件地设置类远不如仅仅在组件上设置一个道具那么优雅。有没有更好的方法来实现这两者的优点？类似的东西

&${p=>p.active}{
  color: ${p.theme.red}
  text-decoration: underline;
}

【问题讨论】：

您可以使用两种不同样式的组件并有条件地渲染其中一个

标签： reactjs styled-components

【解决方案1】：

您可以将活动 CSS 定义为单独的片段，例如

import styled, { css } from "styled-components";

const activeCss = css`
  color: ${p => p.theme.red};
  text-decoration: underline;
`;

const Link = styled.a`
  color:#000;
  ${ p => p.active && activeCSS }
`;

【讨论】：