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

didn't generate classname

Aperta
  • Qualcosa non va?
#288 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
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, react, typescript
Ambito
frontend

Direzione di ricerca

Riproduci l’esempio usando style/header.less e il componente TSX mostrato, quindi confronta i valori di styleName con il DOM generato. Traccia la risoluzione dei moduli CSS del plugin Babel per i selettori annidati; è completato quando i riferimenti date-picker-header e date-picker-icon producono nomi di classe generati non vuoti.

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

Descrizione

my css file:

.date-picker {
  &-header{
  color: #000;
  display: flex;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  height: 32px;
  align-items: center;
  }
  input {
    border: none;
    outline: none;
  }
  &::placeholder {
    line-height: 1.5715;
    font-size: 14px;
  }
  &-icon {
    width: 14px;
    height: 22px;
    margin-right: 4px;
    display: inline-block;
  }
}

component

import React, { SFC, useCallback } from 'react'
import moment from 'moment'
import { IHeaderProps } from './type'
import './style/header.less'

const MHeader: SFC<IHeaderProps> = ({ setType, currentDate }) => {
  const [startDate, endDate] = currentDate
  const startText =
    !startDate
      ? '请选择开始日期'
      : moment(startDate!).format('YYYY-MM-DD') + ''
  const endText =
    !endDate
      ? '请选择结束日期'
      : moment(endDate!).format('YYYY-MM-DD') + ''
  const handleStartClick = useCallback(() => {
    setType(0)
  }, [setType])
  const handleEndClick = useCallback(() => {
    setType(1)
  }, [setType])
  return (
    <div styleName="date-picker-header">
      <span styleName="date-picker-icon"/>
      <input placeholder={startText}  onClick={handleStartClick} />
      <span>至</span>
      <input placeholder={endText} onClick={handleEndClick} />
    </div>
  )
}

export default MHeader

generated dom like this

<div class="src-components-DatePicker-style--date-picker-3x5iN">
<div class=""><span class=""></span><input placeholder="请选择开始日期"><span>至</span><input placeholder="请选择结束日期"></div></div>
Lingua principale
JavaScript
Stelle
2k
Fork
159
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: 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.