离子应用不同的按钮样式答案

【问题标题】：Ionic apply different button styles离子应用不同的按钮样式
【发布时间】：2018-12-17 18:51:39
【问题描述】：

我想根据我在 theme/variables.scss 中声明的全局按钮样式在我的视图中应用不同的按钮样式

button_green{}
button_red{}

在我的 login.html 中

<button>Login</button>  //should be green
<button>Logout</button> //should be red

如何为按钮分配不同的全局样式，而不需要像单个组件特定的样式

<button color='primary' font='xyz' size='n'>Login</button>  
<button color='danger' hint='something'>Logout</button>

还有更多这样的

<button style='button_green'>Login</button>  
<button style='button_red'>Logout</button>

【问题讨论】：

你为什么不简单地声明你的按钮的css类？

标签： css ionic-framework ionic2 ionic3

【解决方案1】：

要使用自定义按钮样式，您可以按照下面的说明进行操作：

1- 由于您要创建全局样式，您需要在 /theme/variables.scss 中添加您的样式类，如下所示： 注意：您需要添加 !important 来覆盖默认的 ionic 样式。

.button_green{
  background-color: green !important;
}
.button_red{
  background-color: red  !important;
} 
.button_blue{
  background-color: blue !important;
}  
.button_yellow{
  background-color: yellow !important;
} 
.button_pink{
  background-color: pink !important;
}  
.button_purple{
  background-color: purple !important;
}

2- 然后在 *.html 中，你可以像这样调用你的 css 类：

<button ion-button class='button_green'>button_green</button>  
<button ion-button class='button_red'>button_red</button> 
<button ion-button class='button_blue'>button_blue</button>  
<button ion-button class='button_yellow'>button_yellow</button> 
<button ion-button class='button_pink'>button_pink</button>  
<button ion-button class='button_purple'>button_purple</button>

3：结果你可以看到：

您可以在此存储库中找到完整的源代码：Ionic Button Custom Collor。

希望对你有帮助:)

【讨论】：

我可以用less代替scss吗？
@BongChannarith Ionic 来自 scss。我认为你不能少用

【解决方案2】：

    If you want a custom button colors you can use below code -

    1 - Declare below code in your CSS class

.font-size{
font-size : 2vw;
         }

    .red{
      background-color: red ;
    } 
    .blue{
      background-color: blue ;
    }  
    .green{
      background-color: green ;
    }
    .yellow{
      background-color: yellow ;
    } 

    2.

    <button ion-button class="font-size red">red</button> 
    <button ion-button class="font-size blue">blue</button>  
    <button ion-button class="font-size green">green</button>  
    <button ion-button class="font-size yellow">yellow</button> 

Note - You can also use one class with another class

【讨论】：