如何在样式组件中有条件地使用变量

Question

我试图有条件地更改样式组件中组件的 UI，但我发现自己经常重复自己。 这就是现在正在发生的事情：

color: ${props => (props.isProductPage ? color('white') : 'reset')};
background-color: ${props =>
  props.isProductPage ? color('primary', 'main') : 'reset'};
font-size: ${props => (props.isProductPage ? '1.4rem' : 'reset')};
font-weight: ${props => (props.isProductPage ? '400' : 'reset')};

但我想将所有这些都放在一个变量中并有条件地导入该变量，但我无法找出我做错了什么。这就是我正在寻找的。

const ProductPageAddToCard = `
color: ${color('primary')};
background: ${color('primary', 'main')};
font-size: ${textSize('medium')};
font-weight: ${textWeight('medium')}
`;

export const StyledAddToCardWrapper = Styled.div`
 button {
  ${props => (props.isProductPage ? ProductPageAddToCard : '')}
 }
`

提前致谢

Answer 1

您可以使用“styled-components”中的“css”导出来创建可重用的 mixin。
这是一个小例子：

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

// ...

const ProductPageMixin = css`
  color: red;
  background-color: orange;
`;

const HomePageMixin = css`
  color: blue;
  background-color: yellow;
`;

const Wrapper = styled.div`
  ${(props) => props.isProductPage && ProductPageMixin}

  ${(props) => props.isHomePage && HomePageMixin}
`;