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};
`;