Material Design Components select menu not rendering correctly for web

问题

I'm trying to add a basic MDC select menu to my website. But it's not quite right—the right of the box shows the MDC arrow along with the normal HTML one, and the words are placed too close to the menu label (seen here).

HTML part—

<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 part

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

and the final app.js part

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

Seems like I have everything I need, but I'm obviously missing something dumb. Any advice is appreciated—thanks!

回答1:

The styling issues must be coming from some additional css or js that you are not showing in your question. Check out the following snippet which contains your code inside a clean document with nothing but the MDC css and js and you will see that the field looks as expected.

mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));

<!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 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">
    <i class="mdc-select__dropdown-icon"></i>
    <select class="mdc-select__native-control">
      <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>

</body>

</html>

回答2:

I just added this code to solve this problem:

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

I have found out that this problem occures only if you use MDC from Node.js modules. The class .mdc-select__native-control in MDC Node modules does not contain two properties above. Although they are present in material-components-web.min.css from CDN.

来源：https://stackoverflow.com/questions/51092321/material-design-components-select-menu-not-rendering-correctly-for-web

标签

html

material-design

material-components

material-components-web

mdc-components