0

I have a styles.module.scss file and a react component. How can add multiple classNames from the styles to ONE html element?

Below is my code:

/styles/styles.module.scss file

.gridContainer {
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 25em;
  grid-template-rows: auto;
}

.gridItem {
  display: flex;
  flex-flow: column;
}

.imageWithText {
  border: 1px solid #4338ca;
  border-radius: 1.6rem;
  align-self: start;
}

/pages/infoPage.tsx file

import styles from "../styles/styles.module.scss";

export default function InfoPage({}: PageProps) {
  <div className={styles.gridContainer}>
    <div className={styles.gridItem}>
      ...
    </div>
    
    {/* I have added TWO style selectors here */}
    <div className={(styles.gridItem, styles.imageWithText)}>
      ...
    </div>
  </div>
}

When I run this code, the div with TWO style selectors does not work as expected. The second classname={styles.gridItem} does not take the scss styles from the .gridItem selector. This div takes the styling only from the .imageWithText.

EXPECTED BEHAVIOR: I want the styles for both the .gridItem and the .imageWithText to apply to the second div.

I believe I am not writing the multiple selectors in the html element correctly and this has possibly got something to do with the way scss works. Any help would be appreciated.

myverdict
  • 622
  • 8
  • 24
  • 1
    If the .gridContainer works, .gridItem should work. And to apply both style to the second div, you can use classnames npm package. ... import cx from 'classnames'; ... className={cx(styles.gridItem, styles. imageWithText)} – Phillip Mrzyglocki Feb 08 '23 at 01:02

1 Answers1

1

You can try with backtic character (`), so your code :

 <div className={`${styles.gridItem} ${styles.imageWithText}`}>
Eve
  • 74
  • 1
  • 10