如何设置Meteor.js loginButtons的样式？

Question

文档指定使用模板{{> loginButtons}}实现默认登录按钮.

将自己的风格应用于此的最佳方法是什么？

• 重写一个新模板(如何做到这一点？)
• 为我标记的CSS文件添加样式 !important
• 其他？

Answer 1

事实证明,可以使用这两种想法的组合.在深入研究accounts-ui包后,结果证明它只包含一个.less文件.实际模板包含在account-ui-unstyled中,当accounts-ui添加到meteor项目中时会自动包含该模板.

因此,CSS可以删除如下:

meteor remove accounts-ui
meteor add accounts-ui-unstyled

然后,您将获得原始HTML,可以根据您的选择进行样式设置.

Answer 2

创建自己的模板肯定会给你更多的控制权.

您可以使用"template"标记创建模板:

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
    <span class="wins"> {{wins}} </span>
    <span class="losses"> {{loss}} </span>
  </div>

</template>

或者您可以使用Chrome上的"Inspect Element"在网页上呈现登录按钮后检查"类"或"id",然后使用这些类作为CSS选择器对其进行相应的样式设置.

例如:

HTML:

//The login button has a class of loginButton
<button class="loginButton"> Login! </button>

CSS:

#Then you can Have a style for the login button as:
.loginButton{
     width: 100px;
     background-color: cyan;
}

Answer 3

查看此截屏视频EventedMind - 自定义登录