Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Passing multiple style props to a child component

Aperta
  • Qualcosa non va?
#306 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
20/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
javascript, react
Ambito
frontend

Direzione di ricerca

Non vengono menzionati file, test o punti di ingresso. Inizia esaminando la gestione di styleName e degli import denominati dei moduli CSS da parte del plugin, quindi controlla la documentazione e gli esempi esistenti per verificare la presenza di più props di stile. Il lavoro è completo quando viene identificato e documentato un approccio chiaro e supportato, oppure quando viene definito il comportamento richiesto se il supporto non è disponibile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

I have a child component, which accepts multiple props for styles, one for the container, and other for one of the internal elements. Generally, I would just name them something like className and elementClassName, and get different css classes from the parent in each of the props. With react-css-modules though, since the default rule only allows converting styleName to className, I can not pass different local classes in multiple props, as i can only have 1 styleName prop.

One of the way around this seems to be to use named imports instead of anonymous imports and then pass styles.containerClass in className and styles.elementClass in elementClassName prop. This does not require using the styleName prop at all.

import styles from './some.css';

...
...
<Component className={styles.containerClass} elementClassName={styles.elementClass} />

...
...

This seems alright, and the other existing styleName in the file do not break, still work alright and do not need to be changed to styles.soemthing, but it is slightly confusing that the named import is being only used at one place, and at the rest of the places the anonymous string value in styleName still works fine.

Is there another preferred / prescribed approach to handle the above scenario?

Lingua principale
JavaScript
Stelle
2k
Fork
159
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Non abbiamo ancora controllato i file di configurazione di questo progetto. Parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di gajus/babel-plugin-react-css-modules

Tutte le issue di gajus/babel-plugin-react-css-modules

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.