React Styled-components TypeScript 使用基础样式上的道具扩展样式得到 TS2769 错误

Question

我正在尝试将样式化的基础扩展到其他样式化的组件，但我收到了打字稿错误。我已经能够在纯 javascript 中做到这一点，我无法在 typescript 中做同样的事情

基础文件 _Modal.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

文件我正在尝试将样式扩展到 registerModal.ts

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

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

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

Answer 1

在 TypeScript 中使用样式组件的提示

如果parent不是具体的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 属性时

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

import {} from 'styled-components/cssprop'

使用 attrs 时

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

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