Type 'string' has no properties in common with type 'Properties<ReactText, string & {}>

user_10433835 0
Viewed 5533

I have a function react element which looks like this

import { CSSProperties } from 'styled-components'
export interface StylesDictionary {
  [Key: string]: CSSProperties
}
interface Props {
  onClick: () => void
  buttonStyle?: StylesDictionary
}
export default function PreviewButton({ onClick, buttonStyle }: Props) {

When I am trying to pass it a style like this

   <PreviewButton
      buttonStyle={{ marginLeft: '20px' }}
      onClick={() => onClickPreview(api, tableDefinition)}
    />

Typescript is giving following error

Type 'string' has no properties in common with type 'Properties<ReactText, string & {}>'

Any idea what I could be doing wrong here?

typescript reactjs
1 Answers

That is because your type definition of StylesDictionary is not done right: If you define StylesDictionary the way you are right now:

export interface StylesDictionary {
  [Key: string]: CSSProperties
}

Then on your PreviewButton props, buttonStyle should be:

<PreviewButton
  buttonStyle={{ anyValue: {marginLeft: '20px'} }}
  onClick={() => onClickPreview(api, tableDefinition)}
/>

Where anyValue can be anything, as long as it is a string
This will show no errors, but I'm sure this is not how you want it to be

To make it work how I guess you intend it, you simply remove StylesDictionary, and change interface Props to be:

interface Props {
  onClick: () => void
  buttonStyle?: CSSProperties
}

Then you will be able to wright buttonStyle as you intend it to:

<PreviewButton
  buttonStyle={{ marginLeft: '20px' }}
  onClick={() => onClickPreview(api, tableDefinition)}
/>
user_140240720
Related