didn't generate classname

[earnest1997]

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>

[darylwright]

I'm also experiencing this issue, however, the classes get generated when there is whitespace after the styleName attribute.

This JSX code...

<ul className="justify-content-center" styleName="pagination">
        <li styleName={`page-item${isFirstPage ? " disabled" : ""}`}>
          <a styleName="page-link" href={`${basePath}/1`} aria-label="First">
            <span aria-hidden="true">&laquo;</span>
            <span className="sr-only">First</span>
          </a>
        </li>
</ul>

... produces this DOM structure.

<ul class="justify-content-center ">
  <li class="">
    <a class="" href="/blog/posts/1" aria-label="First">
      <span aria-hidden="true">«</span>
      <span class="sr-only">First</span>
    </a>
  </li>
</ul>

However, when I put a space after the first styleName attribute only...

<ul className="justify-content-center" styleName="pagination" >{/* Note the space before the closing angle bracket*/}
        <li styleName={`page-item${isFirstPage ? " disabled" : ""}`}>
          <a styleName="page-link" href={`${basePath}/1`} aria-label="First">
            <span aria-hidden="true">&laquo;</span>
            <span className="sr-only">First</span>
          </a>
        </li>
</ul>

all styleNames generate their corresponding classNames.

<ul class="justify-content-center pagination___3ieNK">
  <li class="page-item___2eMHw disabled___2y7aB">
    <a class="page-link___t-Mvf" href="/blog/posts/1" aria-label="First">
      <span aria-hidden="true">«</span>
      <span class="sr-only">First</span>
    </a>
  </li>
</ul>

In another instance, the styleName attribute was not able to be converted over because there wasn't a space before a self-closing <img> tag. (i.e. <img src="..."/> vs. <img src="..." />) Adding the space before self-closing the tag enabled the styleName to generate the className.

Edit: A temporary workaround for the issue I'm having is to position the styleName attribute such that it isn't the last one in the DOM element. This ensures that there is a space after the attribute. This will not work if the styleName is the only attribute in the element.