web-dev-qa-db-fra.com

à l'aide de modules css, comment définir plusieurs noms de style

J'essaie d'utiliser plusieurs classes pour un élément en utilisant des modules CSS. Comment puis-je faire cela?

function Footer( props) {
    const { route } = props;
    return (
        <div className={styles.footer}>
            <div className={styles.description, styles.yellow}>
              <p>this site was created by me</p>
            </div>
            <div className={styles.description}>
              <p>copyright nz</p>
            </div>
        </div>
    );
}
javascriptcssreactjs
25
Navela

Vous pouvez ajouter plusieurs classes à l'aide des modules css comme suit:

className={`${styles.description} ${styles.yellow}`}

par exemple.

function Footer( props) {
    return (
        <div className={styles.footer}>
            <div className={`${styles.description} ${styles.yellow}`}>
              <p>this site was created by me</p>
            </div>
        </div>
    );
}

En utilisant react-css-modules vous pouvez utiliser la syntaxe de nom de classe normale:

<div styleName='description yellow'>

et vous spécifiez allowMultiple: true pour plusieurs classes

45
svnm

Vous pouvez utiliser un tableau qui sera joint à un espace. c'est à dire

<div className={[styles.App, styles.bold, styles['d-flex-c']].join(' ')}>

Je préfère cela à l'utilisation de littéraux de modèle comme @ steven iseki suggéré car il est plus facile d'ajouter et de supprimer des classes sans avoir à les envelopper dans ${} A chaque fois.

Mais si, pour une raison quelconque, vous ajoutez de nombreuses classes à de nombreux éléments, vous pouvez écrire une fonction d'ordre supérieur pour la rendre plus facile.

import React from 'react';
import styles from './Person.module.css';

console.log(styles);
// sample console output =>
// {
//   App: 'App_App__3TjUG',
//   'd-flex-c': 'App_d-flex-c__xpDp1',
// }


// func below returns a function that takes a list of classes as an argument
// and turns it in an array with the spread operator and reduces it into a spaced string

const classLister = styleObject => (...classList) =>
  classList.reduce((list, myClass) => {
    let output = list;
    if (styleObject[myClass]) {
      if (list) output += ' '; // appends a space if list is not empty
      output += styleObject[myClass]; 
      //Above: append 'myClass' from styleObject to the list if it is defined
    }
    return output;
 }, '');

const classes = classLister(styles); 
// this creates a function called classes that takes class names as an argument
// and returns a spaced string of matching classes found in 'styles'

Usage

<div className={classes('App', 'bold', 'd-flex-c')}>

Semble très net et lisible.

Une fois rendu au DOM, il devient

<div class="App_App__3TjUG App_d-flex-c__xpDp1">
/* Note: the class 'bold' is automatically left out because
   in this example it is not defined in styles.module.css 
   as you can be observe in console.log(styles) */

Comme prévu

Et il peut être utilisé avec des conditionnelles en plaçant les classes générées de manière conditionnelle dans un tableau qui est utilisé comme argument pour les classes via l'opérateur ... spread

En fait, en répondant à cela, j'ai décidé de publier un module npm parce que pourquoi pas.

Obtenez-le avec

npm install css-module-class-lister
9
Dudeonyx

pour combiner les noms de classe devant la propriété className, vous pouvez utiliser "clsx", utiliser ce package est facile

import clsx from 'clsx';
// Strings
clsx('foo', 'bar', 'baz'); // 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:true });// 'foo baz'

vous pouvez trouver le package à cette adresse: https://github.com/lukeed/clsx

0
f.jafari

Je recommande fortement d'utiliser le package classnames . Il est incroyablement léger (600 octets minifiés) et n'a aucune dépendance:

import classnames from 'classnames';

Function footer(props) {
  ...
  <div className={classnames(styles.description, styles.yellow)}>
}

Il a même l'avantage supplémentaire de pouvoir ajouter des noms de classe conditionnellement (par exemple, pour ajouter une classe dark theme), sans avoir à concaténer des chaînes qui peuvent accidentellement ajouter un undefined ou false classe:

  <div className={classnames(styles.description, {styles.darkTheme: props.darkTheme })}>
0
Yuan-Hao Chiang