Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

didn't generate classname

Abierto
  • ¿Algo no está bien?
#288 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react, typescript
Área
frontend

Línea de trabajo

Reproduce el ejemplo usando style/header.less y el componente TSX mostrado; después, compara los valores de styleName con el DOM generado. Rastrea la resolución de módulos CSS del plugin de Babel para los selectores anidados; se considera terminado cuando las referencias date-picker-header y date-picker-icon producen nombres de clase generados no vacíos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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>
Lenguaje dominante
JavaScript
Estrellas
2k
Forks
159
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de gajus/babel-plugin-react-css-modules

Todos los issues de gajus/babel-plugin-react-css-modules

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.