En utilisant des noms de classe CSS en kebab-case dans les modules CSS/SASS lors de l'utilisation de Next js

Question

Je utilise modules SCSS pour mes composants en React/Next.js mais je ne peux pas comprendre comment importer des classes en kebab-case.

Pour le moment, j'écris toutes mes classes SCSS en camelCase mais ce n'est pas idéal car cela signifie que je ne peux pas profiter de la cascade SCSS.

(Je suis toujours en train d'apprendre React et je ne suis pas si bon pour créer des composants dynamiques moi-même donc je reste pour le moment avec React Strap.)

Essentiellement, je veux écrire

.company-logo

au lieu de :

.companyLogo

MODIFIER : className={styles['company-logo']} provoque une erreur de jeton inattendue

Voici mon composant :

import styles from './styles/Navbar.module.scss'

const NavComponent = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (

  );
}

export default NavComponent;

Et mon SCSS :

.companyLogo {
    height: 3rem;
}

Answer 1

className={styles['company-logo']}

devrait être ce que vous voulez.

Answer 2

Vous pouvez utiliser la syntaxe de la clé d'objet [].