样式化组件和 TypeScript：没有重载匹配此调用答案

【问题标题】：Styled Components and TypeScript: No overload matches this call样式化组件和 TypeScript：没有重载匹配此调用
【发布时间】：2021-05-25 19:16:50
【问题描述】：

我是样式组件的新手，我正在尝试使用 React Native 构建一个天气应用程序。我通常会使用 CSS 模块，但似乎这不是移动开发的选项。

代码如下：

import ThemeModel from 'models/ThemeModel'
import React, { PureComponent } from 'react'
import styled from 'styled-components/native'

interface HomeScreenComponentInterface {
  theme?: ThemeModel
  getWeatherData: () => void;
  isLoading: boolean | null;
}

class HomeScreenComponent extends PureComponent<HomeScreenComponentInterface> {
  componentDidMount() {
    const { getWeatherData } = this.props

    getWeatherData()
  }

  render() {
    const Container = styled.View`
    padding: 20px 0;
  `
    const HeaderText = styled.Text`
    color: ${(props: HomeScreenComponentInterface) => props.theme && props.theme.colors.lightBlue};
    font-size: ${(props: HomeScreenComponentInterface) => props.theme && props.theme.fontSizes.xLarge};
    font-weight: 500;
  `
    return (
      <Container>
        <HeaderText>Weather App</HeaderText>
      </Container>
    )
  }
}

这是错误的屏幕截图：

这是 Theme.tsx

import React, { FC, ReactNode } from 'react'
import { ThemeProvider } from 'styled-components'

const theme = {
  colors: {
    powderWhite: '#FFFDF9',
    persianGreen: '#06B49A',
    lightBlue: '#AFDBD2',
    onyx: '#36313D',
  },
  fonts: ['sans-serif', 'Roboto'],
  fontSizes: {
    small: '12px',
    medium: '16px',
    large: '24px',
    xLarge: '32px',
  },
}

interface ThemeProps {
  children: ReactNode
}

const Theme: FC<ThemeProps> = ({ children }) => (
  <ThemeProvider theme={ theme }>{children}</ThemeProvider>
)

export default Theme

我相信我只需要将主题道具传递给这个组件，但我不知道该怎么做..

任何帮助都将不胜感激。

【问题讨论】：

标签： reactjs typescript react-native typeerror styled-components

【解决方案1】：

interface HomeScreenComponentInterface {
  theme?: ThemeModel          // optional  
  getWeatherData: () => void; // required
  isLoading: boolean | null;  // required
}

没有与此调用匹配的重载错误发生，因为<HeaderText> 根据您定义的接口需要所需的属性。使它们成为可选的，它应该可以工作。

我遇到了同样的问题。将接口中定义的道具值更改为可选？为我解决了问题。

错误示例：

interface CustomStyleProps {
     width: number;
     height: number;
};

const CarouselContainer = styled.div<CustomStyleProps>`
   display: flex;
   width: ${props => (props.width || 100) + `px`};
   height: ${props => (props.height || 100) + `px`};
`;
 
return(
     <CarouselContainer/> // Error : No overload matched this call
)

无错误示例：

interface CustomStyleProps {
      width?: number;
      height?: number;
};
    
 const CarouselContainer = styled.div<CustomStyleProps>`
     display: flex;
     width: ${props => (props.width || 100) + `px`};
     height: ${props => (props.height || 100) + `px`};
 `;

 return(
     <CarouselContainer/> // No Error
 )

【讨论】：

【解决方案2】：

 const HeaderText = styled.Text`
     color: ${({ theme }) => theme.colors.lightBlue};
 `;

您不必在道具界面（HomeScreenComponentInterface）中包含主题的类型。 ThemeProvider 为其子级中的所有样式化组件提供主题。 Typescript 抛出该错误是因为您告诉 HeaderText 样式的组件期望 isLoading 和 getWeatherData 道具。这些 props 不是渲染样式组件所必需的。

【讨论】：

【解决方案3】：

 const HeaderText = styled.Text<HomeScreenComponentInterface>`// Typescript magic
    color: ${({ theme }) => theme && theme.colors.lightBlue};
    `

Typescript 无法推断传递给样式化组件的道具的类型，因此您必须像上面那样显式设置它们。

【讨论】：