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中使用样式化组件的提示

如果父组件不是特定的react组件，建议简单地按如下方式编写。

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

如果组件很复杂或引用了父道具，则拾取可以降低维护成本

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
}

通过这样做，您可以使用编辑器的suggestion函数检查哪个常量具有哪个px。

​

使用css属性时

Babel-plugin和css prop都是jsx的扩展，所以如果你什么都不做，TS会生气的。您可以通过在根类型的index.d.ts中编写以下代码来解决此问题。(Styled component/ cssprop是react的扩展)

import {} from 'styled-components/cssprop'

使用attrs时

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

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