didn't generate classname

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>

style/header.less と示されている TSX コンポーネントを使って例を再現し、その後 styleName の値を生成された DOM と比較します。ネストされたセレクターに対する Babel プラグインの CSS モジュール解決を追跡します。date-picker-header と date-picker-icon の参照から空でない生成クラス名が生成されれば完了です。