如何将react-typescript className转换为数组

Question

假设我有一个对样式进行单一引用的组件，效果很好

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

但是，我想获得多种样式的参考，例如

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

打字稿抛出一个error说：

预期的类型来自属性“className”，该属性在类型“IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<{children?: ReactNode;”上声明。}>'

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

Answer 1

的类型className是String并且您正在传递类型Array<String>

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

这是不可分配的。

因此，您必须使用join()或将该数组转换为字符串concatenation，或者使用类名库

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

使用类名库

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