reactjs - איך להפוך className ב-react-typescript למערך

נניח שיש לי רכיב עם הפניה אחת לסטיילים, עובד טוב

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

אבל תגיד, אני רוצה שיהיה לי הפניה עם סגנונות מרובים כמו

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

TypeScript זורק שגיאה ואומר:

סוג הצפוי מגיע מהתכונה 'className' שהוצהרה כאן על סוג 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<{ children?: ReactNode; }>'

איך אוכל לשנות את סוג className למערך כדי שיהיה ניתן לקבל את הפורמט שאני רוצה?

תשובה #1

סוג של className הוא String ואתה מעביר סוג Array<String>

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

שזה לא ניתן לשיוך.

אז או שצריך להפוך את המערך הזה למחרוזת בעזרת join() או concatenation או להשתמש בספריית classnames

• [styles.myStyle, styles.myOtherStyle].join(' ')

• {styles.myStyle + ' ' + styles.myOtherStyle}

• $ {styles.myStyle}$ {styles.myOtherStyle}

שימוש בספריית classnames

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

תשובה #2

className={[styles.myStyle, styles.myOtherStyle, "otherClass"].join(' ')}

className={`${styles.foo} ${styles.bar}`}