Question

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

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

重写一个新模板（如何做到这一点？）
为标记为!important
其他？

Answer 1

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

因此，可以按如下方式删除CSS：

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

然后您将使用the raw 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>

OR 您可以在网页上使用“检查元素”在网页上呈现登录按钮的“类”或“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 - Customizing Login

Answer 4

创建您自己的class EnrollForm(forms.ModelForm): class Meta: model = EnrollmentApplication fields = [ 'reasons_for_childcare', ]模板，类似于以下内容。根据您的口味设计风格。

html

meteor add accounts-password accounts-ui

您现在可以在模板事件中调用<template name="login"> <form class="login-form"> <div class="panel panel-default"> <div class="panel-heading"> <h3>Login</h3> </div> <div class="panel-body"> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" id="email" placeholder="Email address"> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" id="password" placeholder="password"> </div> </div> <div class="panel-footer"> <button type="submit" class="btn btn-danger btn-lg">Login</button> </div> </div> </form> </template>，如下所示：

Meteor.loginWithPassword

您也可以创建另一个注册表单。

只需致电Template.login.events({ 'submit .login-form': function(e) { e.preventDefault(); var email = e.target.email.value; var password = e.target.password.value; Meteor.loginWithPassword(email, password,function(error){ if(error) { //do something if error occurred or }else{ FlowRouter.go('/'); } }); } });

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

4 个答案: