styled-components 和 TS2769：没有重载匹配此调用

Question

我正在尝试使用styled-components来设置我自己的组件的样式，但是自从我使用这个库以来已经有一段时间了。 重新阅读文档，我实际上不记得像这样使用它来设置我自己的组件的样式，但是我们开始了。

我正在使用style-components版本 5.3.5 和react版本 18.1.0。

我的App.tsx看起来像这样：

const AppComponent = () => (
  <ThemeProvider theme={theme}>
    <Calculator></Calculator>
  </ThemeProvider>
);

const App = styled(AppComponent)`
  background-color: ${props => props.theme.primaryColor};
  width: 100%;
  height: 100%;
`;

export default App;

我的Calculator.tsx看起来像这样：

const CalculatorComponent = ({className}) => (
  <div className={className}>This is a calculator</div>
);

export const Calculator = styled(CalculatorComponent)`
  background-color: ${props => props.theme.primaryColor};
`;

现在， App.tsx似乎无法编译，产生以下错误：

 Property 'className' is missing in type '{}' but required in type '{ className: any; }'. 6 | const AppComponent = () => ( 7 | <ThemeProvider theme={theme}> 8 | <Calculator></Calculator> | ^^^^^^^^^^ 9 | </ThemeProvider> 10 | );

我无法理解这一点。 我正在关注有关样式化您自己的组件的文档，但没有提示我可能做错了什么。 有任何想法吗？

Answer 1

 export const Calculator = ({className}) => 
    (<CalculatorStyled className={className}>
    This is a calculator
    </CalculatorStyled>);

export const CalculatorStyled = styled.div`
  background-color: ${props => props.theme.primaryColor};
`;

在您的情况下，这是必需的，它会起作用。 如果您想使用其他系统，您还需要传递子元素。 这就是它抛出错误的原因

Answer 2

我找到了解决方案。 我现在正在这样做：

const CalculatorComponent = ({...rest}) => (
  <div {...rest}>This is a calculator</div>
);

export const Calculator = styled(CalculatorComponent)`
  background-color: ${props => props.theme.primaryColor};
`;