材料设计组件选择菜单无法正确呈现网页答案

【问题标题】：Material Design Components select menu not rendering correctly for web材料设计组件选择菜单无法正确呈现网页
【发布时间】：2018-12-08 02:14:05
【问题描述】：

我正在尝试向我的网站添加一个基本的 MDC 选择菜单。但它并不完全正确 - 框的右侧显示了 MDC 箭头以及普通的 HTML 箭头，并且这些文字放置在离菜单标签太近的位置 (seen here)。

HTML 部分——

<div class="mdc-select mdc-select--box day-select">
  <select class="mdc-select__native-control" required>
    <option value="" disabled selected></option>
    <option value="grains">
      Bread, Cereal, Rice, and Pasta
    </option>
    <option value="vegetables">
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
  </select>
  <label class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

app.scss 部分

@import "@material/select/mdc-select";

以及最后的 app.js 部分

import {MDCSelect} from '@material/select';
new MDCSelect(document.querySelector('.day-select'));

似乎我拥有我需要的一切，但我显然错过了一些愚蠢的东西。任何建议都值得赞赏 - 谢谢！

【问题讨论】：

标签： html material-design material-components material-components-web mdc-components

【解决方案1】：

最初提出这个问题时，样式问题一定来自问题中未显示的一些额外的 css 或 js（有关详细信息，请参阅编辑历史记录）。从那时起，MDC select 组件所需的标记发生了变化。有关示例设置，请参见以下 sn-p。

const select = mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
select.listen('MDCSelect:change', () => {
  console.log(select.selectedIndex, select.value);
});

.mdc-select__anchor,
.mdc-select__menu {
  width: 400px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Select Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <div class="mdc-select">
  
    <div class="mdc-select__anchor">
      <i class="mdc-select__dropdown-icon"></i>
      <div class="mdc-select__selected-text"></div>
      <span class="mdc-floating-label">Pick a Food Group</span>
      <span class="mdc-line-ripple"></span>
    </div>
    
    <div class="mdc-select__menu mdc-menu mdc-menu-surface">
      <ul class="mdc-list">
        <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
        <li class="mdc-list-item" data-value="grains">
          <span class="mdc-list-item__text">
            Bread, Cereal, Rice, and Pasta
          </span
        </li>
        <li class="mdc-list-item" data-value="vegetables">
          <span class="mdc-list-item__text">
            Vegetables
          </span>
        </li>
        <li class="mdc-list-item" data-value="fruit">
          <span class="mdc-list-item__text">
            Fruit
          </span>
        </li>
      </ul>
    </div>
    
  </div>

</body>

</html>

【讨论】：

是的，你完全正确。诡异的。谢谢你的建议——我要开始打猎了。
我实际上也遇到了这个问题，我不知道出了什么问题 :( 我无法在 Chrome Inspector 中找到任何额外的 CSS
@Sticky 实际上，我的问题最终出现在我的 json（package.json 和 package-lock.json）文件以及他们调用的版本中。我将版本从0.36 降低到0.35.2，现在一切正常。
原来是因为与另一个 css 包发生冲突 - bootstrap-sassy

【解决方案2】：

我刚刚添加了这段代码来解决这个问题：

.mdc-select__native-control {
    -webkit-appearance: none;
    -moz-appearance: none;
}

我发现只有在使用 Node.js 模块中的 MDC 时才会出现此问题。 MDC Node 模块中的.mdc-select__native-control 类不包含上述两个属性。尽管它们存在于 CDN 的 material-components-web.min.css 中。

【讨论】：