我正在尝试从简单的消息对话框开始学习如何使用 Google 的 Polymer 1.0 组件。对话框出现,但它没有我在 Google 的 Polymer 演示中看到的样式,因此我尝试向对话框添加样式以匹配我在 Google 演示中看到的样式:
<html>
<head>
<script src="scripts/polymer/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="scripts/polymer/paper-dialog/paper-dialog.html">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
paper-dialog {
font-family: 'Roboto', sans-serif;
font-size: 14px;
margin: 0;
padding: 24px;
}
</style>
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
填充值工作正常,但字体系列和字体大小被忽略。我知道字体下载正常,因为在对话框出现之前,使用 Roboto 字体的“测试对话框”文本会短暂出现在页面顶部。控制台中没有错误。
让对话框接受我想要的样式的正确方法是什么?请注意,我可以使用带有所需字体样式的 div 来包装对话框内容,但我怀疑这是否被认为是在 Polymer 中执行此操作的正确方法。
最佳答案
您可能需要导入 paper-styles-classes.html
根据您的示例,尝试添加
<link rel="import" href="scripts/polymer/paper-styles/paper-styles-classes.html">
或查找类似的文件。
关于polymer-1.0 - 如何更改Polymer Paper组件的字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31415359/