大纲选择不显示mdc-select v4.0.0

问题描述

我正在尝试实施“材料设计选择菜单”。基本的方法工作正常，但是当我为“选择轮廓”变体应用HTML格式时，它不能正确显示（see CodePen），而是显示垂直线而不是选择。

这是我的HTML：

<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon language-select">
  <div class="mdc-select__anchor">
    <div class="mdc-notched-outline mdc-notched-outline--upgraded">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <div id="language-selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listBox" aria-labelledby="language-select-label language-selected-text" tabindex="0" aria-disabled="false">
        </div>
        <label id="language-select-label" class="mdc-floating-label">
          Language
        </label>
        <i class="material-icons mdc-select__icon" tabindex="0" role="button"></i>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>
  <div class="mdc-select__menu mdc-menu mdc-menu-surface language-select" role="listBox">
    <ul class="mdc-list">

      <li class="mdc-list-item" data-value="/en/" role="option" tabindex="-1">
        <span class="mdc-list-item__graphic">
          <img src="/static/icons/languages/en.png" alt="English flag icon">
        </span>
        <span class="mdc-list-item__text">English</span>
      </li>

      <li class="mdc-list-item" data-value="/fr/" role="option" tabindex="-1">
        <span class="mdc-list-item__graphic">
          <img src="/static/icons/languages/fr.png" alt="Français flag icon">
        </span>
        <span class="mdc-list-item__text">Français</span>
      </li>

      <li class="mdc-list-item" data-value="/id/" role="option" tabindex="-1">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <img src="/static/icons/languages/id.png" alt="Indonesia flag icon">
        </span>
        <span class="mdc-list-item__text">Indonesian</span>
      </li>

      <li class="mdc-list-item" data-value="/it/" role="option" tabindex="-1">
        <span class="mdc-list-item__graphic">
          <img src="/static/icons/languages/it.png" alt="Italiano flag icon">
        </span>
        <span class="mdc-list-item__text">Italiano</span>
      </li>
    </ul>
  </div>
</div>

我使用v4.0.0 of mdc-select以及文档中概述的HTML，CSS和JS：https://github.com/material-components/material-components-web/blob/v4.0.0/packages/mdc-select/README.md

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）