Material Design Components не правильно отображает меню для веб

Я пытаюсь добавить основное меню выбора 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.scss

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

и последняя часть app.js

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

Кажется, у меня есть все, что мне нужно, но мне явно не хватает чего-то глупого. Любой совет приветствуется - спасибо!

Источник

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>

Источник

Я просто добавил этот код, чтобы решить эту проблему:

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

Я выяснил, что эта проблема возникает только в том случае, если вы используете MDC из модулей Node.js. Класс.mdc-select__native-controlв модулях MDC Node не содержит двух свойств выше. Хотя они присутствуют вmaterial-components-web.min.css из CDN.

Источник
Другие вопросы по тегам