reactjs - 如何将 react-typescript className 制作成数组

Question

假设我有一个仅引用样式的组件，效果很好

export const something = () => {
  return (
    <div className={styles.myStyle}
  )
}:

但是说，我想要一个包含多种样式的引用，例如

export const something = () => {
  return (
    <div className={[styles.myStyle, styles.myOtherStyle]}
  )
}:

Typescript 抛出一个error 说:

The expected type comes from property 'className' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<{ children?: ReactNode; }>'

如何将 className 类型更改为数组以便能够接受我想要的格式？

Answer 1

className 的类型是String你正在传递类型 Array<String>

className={[styles.myStyle, styles.myOtherStyle]}

不可分配。

所以要么你必须使用 join() 将该数组变成一个字符串或 concatenation或使用 classnames library

• [styles.myStyle, styles.myOtherStyle].join(' ')
• {styles.myStyle + ' ' + styles.myOtherStyle}
• ${styles.myStyle} ${styles.myOtherStyle}

使用类名库

import * as classnames from 'classnames'
className={classnames(styles.myStyle, styles.myOtherStyle)}