了解样式化组件中的 CSS 辅助函数

Posted 2023-02-21

【中文标题】了解样式化组件中的 CSS 辅助函数

【英文标题】：Understanding css helper function in styled components

【发布时间】：2022-01-21 04:35:25

【问题描述】：

样式化组件有一个帮助器css 函数。但我不明白我应该什么时候使用它。

例如，这是他们使用它的示例：

import styled,  css  from 'styled-components'

const complexMixin = css`
  color: $props => (props.whiteColor ? 'white' : 'black');
`

const StyledComp = styled.div`
  /* This is an example of a nested interpolation */
  $props => (props.complex ? complexMixin : 'color: blue;');
`

但如果我们从此处的文档中获取类似的示例，他们不会使用它：

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: $props => props.primary ? "palevioletred" : "white";
  color: $props => props.primary ? "white" : "palevioletred";

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

他们的描述也不清楚，让我很困惑：

从模板文字生成 CSS 的辅助函数 插值。如果您返回模板文字，则需要使用它 由于标记模板的方式，在插值内具有函数 文字在 javascript 中工作。

有人可以帮助解释我们为什么需要它吗？

PS 这个answer 也不用了

【参考方案1】：

我在为组件创建变体时使用 css 函数：

那是变体切换器：

const sizeVariant: Record<NonNullable<StyledLogoProps['size']>, ReturnType<typeof css>> = 
  small: css`
    width: 44px;
    height: 44px;
  `,
  regular: css`
    width: 93px;
    height: 93px;
  `,
;

即组件是由 'styled-components' 创建的：

interface StyledLogoProps 
  size: 'small' | 'regular';


export const StyledLogo = styled.div<StyledLogoProps>`
  $( size ) => sizeVariant[size]
`;

这是反应中的用途：

<>
  <StyledLogo size="regular" />
  <StyledLogo size="small" />
</>

很有用的东西