Question

我来自javascript世界，刚接触typescript。我有一个用typescript编写的react项目。我声明了内联样式，但在react组件中使用它时却得到警告：

Type '{ color: string; fontSize: string; fontWeight: number; }' is not assignable to type 'CSSProperties'.

下面是样式声明的代码。

const styles = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column'
    }
};

下面的

是使用它的代码。并在此行<div style={styles.promAlert}>发出警告。

<div style={styles.promAlert}>
    {alert.substring('promotions.'.length)}
</div>

我搜索到，这可能是由于react中定义的CSSProperties引起的。我可能需要扩展此类并在其上添加更多属性。我想知道如何在我的项目中做到这一点。

另一个问题是为什么CSSProperties不包括所有受支持的CSS密钥。

Answer 1

将样式对象设置为React.CSSProperties。由于CSSProperties中的这些字段需要特定的字符串（而不仅仅是任何字符串），因此您必须告诉Typescript您正在使用哪种对象，以便对其进行相应处理。

const styles = {
  promAlert: {
    display: "flex",
    flexDirection: "column",
  } as React.CSSProperties,
}

Answer 2

您已经定义了const styles.promption，但是在标记内使用了style = {styles.promAlert}。应该是{styles.promption}，对吧？

Answer 3

更改

const styles = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column'
    }
};

收件人

const styles = {
    promAlert: {
        display: 'flex' as 'flex',
        flexDirection: 'column' as 'column'
    }
};

这告诉TypeScript这些值为literals。

Answer 4

您可以这样定义styles类型：

const styles: { [key: string]: React.CSSProperties } = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column'
    }
};

Answer 5

使用来自情感的 CSSObject

import { CSSObject } from '@emotion/react'

const st: CSSObject = {
  table: {
    borderWidth: 2,
    borderColor: 'green',
    '&:hover': {
      color: 'white',
    },
  }
}

如何在React项目中扩展CSSProperites

5 个答案: