CODEWITHSUNDEEP
javascriptcssreactjstypescriptsass
ThePerplexedOne
ThePerplexedOne

Reputation: 2950

Can't style with SASS/SCSS in React properly

Take this SCSS stylesheet:

@import "../vars";

img.userIcon {
  &.regular {
    max-width: 64px;
    max-height: 64px;
  }
  &.small {
    max-width: 32px;
    max-height: 32px;
  }
  border-radius: 50%;
  border: 2px solid $bg-light;
}

How on earth do I get my page to recognise the .regular or .small?

This my UserIcon.tsx that applies this styling:

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

type Props = {
    src: string,
    variant?: "regular" | "small"
}
export default function UserIcon({ src, variant = "regular" }: Props) {
    return <img className={`${styles.userIcon} ${variant} mb-2`} src={src} />
}

Now, this obviously won't work because somewhere along the lines, the class names are all jumbled up and look like this:

<img class="UserIcon_userIcon__1jFAP regular mb-2">

Which is odd, because it doesn't ever do this to the boostrap scss files that I have imported.

So I need to know either:

Upvotes: 1

Views: 273

Answers (2)

HichamELBSI
HichamELBSI

Reputation: 1719

Can you try something like that.

@import "../vars";

img.userIcon {
  border-radius: 50%;
  border: 2px solid $bg-light;
}
img.regular {
    max-width: 64px;
    max-height: 64px;
  }
img.small {
    max-width: 32px;
    max-height: 32px;
  }

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

type Props = {
    src: string,
    variant?: "regular" | "small"
}
export default function UserIcon({ src, variant = "regular" }: Props) {
    return <img className={`${styles.userIcon} ${styles[variant]} mb-2`} src={src} />
}

Tell me if it solved your problem

Upvotes: 0

buzatto
buzatto

Reputation: 10382

pass variant as key argument to your styles object:

return <img className={`${styles.userIcon} ${styles[variant]} mb-2`} src={src} />

Upvotes: 2

Related Questions