Блог

У меня есть функция react element, которая выглядит следующим образом

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

Когда я пытаюсь передать ему стиль, подобный этому

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

Typescript выдает следующую ошибку

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

Есть идеи, что я мог здесь делать не так?

Это потому, что ваше определение типа StylesDictionary выполнено неправильно: если вы определяете StylesDictionary так, как вы сейчас:

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

Тогда в ваших PreviewButton реквизитах buttonStyle должно быть:

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

Где anyValue может быть что угодно, если это строка
Это не покажет ошибок, но я уверен, что это не так, как вы хотите, чтобы это было

Чтобы заставить его работать так, как я предполагаю, вы намереваетесь, вы просто удаляете StylesDictionary и изменяете interface Props , чтобы быть:

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

Тогда вы сможете редактировать buttonStyle так, как вы намереваетесь:

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