Question

我正在尝试向我的网站添加一个基本的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'));

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

Answer 1

样式问题必须来自您未在问题中显示的其他CSS或JS。请查看以下代码段，其中将您的代码包含在一个干净的文档中，仅包含MDC css和js，您将看到该字段看起来像预期的那样。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Select Field</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 rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">   
  </head>

  <body>
  
    <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>
    
    <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
    <script>mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));</script>
    
  </body>
</html>

Answer 2

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

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

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

Material Design Components选择菜单无法正确呈现给Web

2 个答案: