Html 材质设计组件“选择”菜单未正确渲染web

我正在尝试向我的网站添加一个基本的MDC选择菜单。但这并不完全正确，框的右侧显示了MDC箭头和正常的HTML箭头，并且单词的位置太靠近菜单标签

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.js

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

---

看起来我拥有我所需要的一切，但我显然错过了一些愚蠢的东西。任何建议都将不胜感激，谢谢

当最初提出此问题时，样式问题一定来自问题中未显示的其他css或js。有关详细信息，请参见编辑历史记录。从那时起，组件所需的标记发生了变化。有关示例设置，请参见以下代码段

const select=mdc.select.MDCSelect.attachTodocument.querySelector'.mdc select'； 选择。听'MDCSelect:change'，=>{ console.logselect.selectedIndex，select.value； }; .mdc-select__锚， .mdc-选择菜单{ 宽度：400px； } 材料选择示例 挑选一组食物 面包、谷类、米饭和面食

---

当最初提出这个问题时，样式问题一定来自问题中未显示的其他css或js。有关详细信息，请参阅编辑历史记录。从那时起，组件所需的标记发生了变化。有关示例设置，请参见以下代码段

const select=mdc.select.MDCSelect.attachTodocument.querySelector'.mdc select'； 选择。听'MDCSelect:change'，=>{ console.logselect.selectedIndex，select.value； }; .mdc-select__锚， .mdc-选择菜单{ 宽度：400px； } 材料选择示例 挑选一组食物 面包、谷类、米饭和面食

---

我刚刚添加了以下代码来解决此问题：

.mdc-select\u native-control{ -webkit外观：无； -moz外观：无； } 我发现，只有在使用Node.js模块中的MDC时，才会出现此问题。

---

mdc节点模块中的类.mdc-select\u native-control不包含上述两个属性。虽然它们出现在CDN的material-components-web.min.css中。

我只是添加了以下代码来解决这个问题：

.mdc-select\u native-control{ -webkit外观：无； -moz外观：无； } 我发现，只有在使用Node.js模块中的MDC时，才会出现此问题。

---

mdc节点模块中的类.mdc-select\u native-control不包含上述两个属性。尽管它们出现在CDN的material-components-web.min.css中。

是的，你完全正确。奇怪的谢谢你的建议，我会开始搜索的。实际上我也遇到了这个问题，我不知道怎么了：我无法在Chrome中找到任何额外的CSSInspector@Sticky实际上，我的问题最终出现在我的json package.json和package-lock.json文件中，以及它们调用的版本中。我把版本从0.36降到了0.35.2，现在一切似乎都好了。原来这是因为与另一个css包-bootstrap sassy发生了一些冲突。是的，你完全正确。奇怪的谢谢你的建议，我会开始搜索的。实际上我也遇到了这个问题，我不知道怎么了：我无法在Chrome中找到任何额外的CSSInspector@Sticky实际上，我的问题最终出现在我的json package.json和package-lock.json文件中，以及它们调用的版本中。我把版本从0.36降到了0.35.2，现在一切都好了，原来是因为与另一个css包bootstrap sassy发生了冲突

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