Using css module in react app. How can I get rid of styles keyword

Question

I used css modules in my react app and here is my code:

import styles from './PlayerCard.module.css';
import PlayerPhoto from '../../images/players/Farahani.png';

export default function PlayerCard() {
  return (
    <div className={styles.PlayerCard}>
      <img className={styles.PlayerPhoto} src={PlayerPhoto} alt="Player" />
      <p className={styles.PlayerName}>Farahani</p>

      <div className={styles.SkillBox}>
        <div className={styles.SkillName}>
          <p>Defence:</p>

How can I get rid of those styles keywords? is there any way like destructuring or something?

Hoang · Accepted Answer · 2022-02-11 12:01:50Z

Yes you can use Object destructuring.

import styles from './PlayerCard.module.css';
import PlayerPhoto from '../../images/players/Farahani.png';

const { PlayerCard: PlayerCardStyle, PlayerPhoto: PlayerPhotoStyle, PlayerName: PlayerNameStyle, SkillBox, SkillName } = styles;

export default function PlayerCard() {
  return (
    <div className={PlayerCardStyle}>
      <img className={PlayerPhotoStyle} src={PlayerPhoto} alt="Player" />
      <p className={PlayerNameStyle}>Farahani</p>

      <div className={styles.SkillBox}>
        <div className={styles.SkillName}>
          <p>Defence:</p>

Note that for PlayerCard, PlayerPhoto, and PlayerName, I need to alias it to different names so that they don't get conflicted with the components' names.

Alternatively, you can also import the styles like below:

import { PlayerCard as PlayerCardStyle, PlayerPhoto as PlayerPhotoStyle, PlayerName as PlayerNameStyle, SkillBox, SkillName } from './PlayerCard.module.css'

Similarly, you also have to alias the imports.

Collectives™ on Stack Overflow

Using css module in react app. How can I get rid of styles keyword

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related