styled-components and TS2769: No overload matches this call-CodePudding

I am trying to use styled-components to style my own component, but it has been a while since I used this library. Re-reading the documentation, I don't actually recall using it like this to style my own component, but there we go.

I am using style-components version 5.3.5 and react version 18.1.0.

My App.tsx looks like this:

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;

and my Calculator.tsx looks like this:

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

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

Now, App.tsx appears to have trouble compiling, generating this error:

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 | );

I can't understand this. I am following the documentation about styling your own component, but there is no hint there as to what I might be doing wrong. Any ideas?

CodePudding user response：

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

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

In your case, this is needed and it will work. If you want to do with other system you need pass children element as well. That's why its throws error

CodePudding user response：

I have found a solution. I am now doing this:

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

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