我正在尝试向我的网站添加基本的 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'));
看起来我已经拥有了我需要的一切，但我显然错过了一些愚蠢的东西。如有任何建议，我们将不胜感激 - 谢谢!
最佳答案
当这个问题最初被问到时，样式问题一定是来自问题中未显示的一些额外的 css 或 js(有关详细信息，请参阅编辑历史记录)。从那时起，MDC select 所需的标记组件已更改。请参阅以下代码片段以获取示例设置。
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>关于html - Material Design 组件选择菜单无法正确呈现网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51092321/