Question

我爱你可以做到

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;
}

但是，有条件地设置类要比仅在组件上设置prop优雅得多。是否有更好的方法来实现这两者的优点？像

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

Answer 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 }
`;

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

1 个答案: