React 样式组件 TypeScript 使用基本样式上的 props 扩展样式出现 TS2769 错误

Question

我试图将基本样式扩展到其他样式组件，但出现打字稿错误。我已经能够在纯 javascript 中执行此操作，但无法在 typescript 中执行相同的操作

基础文件 _莫代尔.ts

import styled from 'styled-components/macro'

interface I_Modal {
  'background-color': string
  'min-height': string
  'min-width': string
}

const _modal = styled.div<I_Modal>`
  background-color: ${props => props['background-color'] ? props['background-color'] : props.theme.colors.baseColor};
  min-height: ${props => props['min-height'] ? props['min-height'] : '300px'};
  min-width: ${props => props['min-width'] ? props['min-width'] : '200px'}
`

export default _modal

文件我正在尝试将样式扩展到 注册Modal.ts

import styled from 'styled-components/macro'
import _modal from './_modal'

export const RegisterModal = styled(_modal)`
  background-color: purple;
  height: 300px;
  width: 200px;
`

VSCode 中的一切都说它很好，只是编译不正确

Answer 1

在 TypeScript 中使用样式组件的技巧

如果父级不是特定的react组件，建议简单写成如下。

const Button = styled.button<{primary: boolean}>`
  color: ${({primary}) => primary ? 'skyblue' };
`

如果组件复杂或者引用父 props，拾取可以降低维护成本

interface Props {
  primary
  secondary
}

function MyComponent(props: Props) {
  return (
    <div>
      <Button secondary={props.secondary} primary={props.primary}>{props.children}</Button>
    </div>
  )
}

const Button = styled.button<Pick<Props, 'primary' | 'secondary'>>`
  ${({primary, secondary}) => primary ? css`` : secondary ? css`` : css``}
`

输入常数

输入颜色和大小等常量很方便，这样您就可以在使用它们时看到应用了哪个 px。

const FONT = {
  XXXLARGE: 32,
  XXLARGE: 24,
  XLARGE: 18,
  LARGE: 16,
  MEDIUM: 14,
  BASE: 12,
  SMALL: 11,
  XSMALL: 10,
  TINY: 8,
} as const

const FONT_WEIGHT = {
  NORMAL: 400,
  BOLD: 600,
} as const

const BORDER_RADIUS = 4 as 4

export default {
  FONT,
  FONT_WEIGHT,
  BORDER_RADIUS
}

通过这样做，您可以使用编辑器的建议功能检查哪个常量具有哪个px。

使用 css prop 时

babel宏启用的babel-plugin和css prop都是jsx的扩展，所以如果你什么都不做，TS就会生气。 您可以通过在root类型的index.d.ts中写入以下内容来解决它。 （Styled-components / cssprop是react的扩展）

import {} from 'styled-components/cssprop'

使用属性时

这写起来肯定有点麻烦，所以你一开始可能不会经常使用 attrs。

const StyledImg = styled.img.attrs<{ logoSrc: logoSrc }>(
  ({logoSrc}) => ({
    src: logoSrc,
  })
)<{ logoSrc: logoSrc }>