如何将相同的道具应用于多个样式的组件？

Question

我正在使用styled-components 库来扩展Blueprintjs 库中的标头组件。 H6 组件目前看起来像：

export const DH6 = styled(H6)`
  color: ${(props) => (props.white ? "white" : null)};
  display: ${(props) => (props.flex ? "flex" : null)};
  opacity: ${(props) => (props.opaque ? 0.7 : null)};
  font-weight: ${(props) => (props.heavy ? 500 : 300)};
  text-align: ${(props) => (props.center ? "center" : null)};
  font-style: ${(props) => (props.italics ? "italic" : null)};
  text-decoration: ${(props) => (props.underline ? "underline" : null)};
`;

这很好用。我现在想将相同的道具从D1 应用到D5。有没有办法以 DRY 的方式做到这一点，而不是应付道具？我尝试将道具分配给变量但没有成功：

const generalProps = {
  opacity: ${(props) => (props.opaque ? 0.7 : null)},
  color: ${(props) => (props.white ? "white" : null)},
  display: ${(props) => (props.flex ? "flex" : null)},
  font-weight: ${(props) => (props.heavy ? 500 : 300)},
  text-align: ${(props) => (props.center ? "center" : null)},
  font-style: ${(props) => (props.italics ? "italic" : null)},
  text-decoration: ${(props) => (props.underline ? "underline" : null)}

}

export const DH6 = styled(H6)`
  {...generalProps}
`;

有什么方法可以对styled-components中的变量进行prop赋值吗？

Answer 1

作为一个简单的例子，你可以使用

import styled, {css} from 'styled-components'

const GlobalStyles = css`
  color: ${(props) => (props.white ? "white" : null)};
  display: ${(props) => (props.flex ? "flex" : null)};
  opacity: ${(props) => (props.opaque ? 0.7 : null)};
  font-weight: ${(props) => (props.heavy ? 500 : 300)};
  text-align: ${(props) => (props.center ? "center" : null)};
  font-style: ${(props) => (props.italics ? "italic" : null)};
  text-decoration: ${(props) => (props.underline ? "underline" : null)};
`

const StyledDiv = styled.div`
 ${GlobalStyles}
 // Other Styles
`

你要做的是从styled-components导入css
有了它，您可以生成特定的 css 并将其作为模板文字返回 see the document。
并且为了可重用性，您通常可以使用${value}，它相当于Spread Operator（或{...value}）用于样式组件