CSS代码并不适用于按钮2离子(css code doesn't apply to butt

我一般是新来的离子和混合的应用程序。 虽然堵漏，并用奶嘴的应用程序打，我看不出有任何CSS工作。 我究竟做错了什么？ 这里是我的文件：test.scss：

test{


.button-inner {
  width:20% !important;
  margin:30px;
}
}

此外，这里的尊敬的test.html文件：

<ion-content padding>
<button ion-button round class="button-inner">Submit</button>

</ion-content>

而我指的是这些类TS文件：

@Component({
  selector: 'test',
  templateUrl: 'test.html',
})

不知道为什么按钮还是占用了屏幕而不是只有20％的整个宽度。 有任何想法吗？

谢谢

Answer 1:

我以前也有这个问题，我认为这是角度的观点封装的原因（又名影子根）。 我做这样的事情围绕它的工作：

<ion-content padding>
<button ion-button round><span class="button-inner">Submit</span></button>

</ion-content>

不能完全肯定，如果这会给你想要的结果，因为我还没有和离子的工作很多。

编辑

在评论交谈后，我创建与希望的行为工作plnkr。

home.ts

import { Page, NavController } from 'ionic-angular/index';

@Page({
  templateUrl:"home.html"
})
export class HomePage {
  constructor(private nav: NavController) {}
}

home.html的

<ion-content padding>
  <button ion-button round class="custom-button button-inner">Submit</button>
</ion-content>

style.css文件

.custom-button {
  width: 20% !important;
  margin: 0 auto;
}

Plnkr

文章来源: css code doesn't apply to button in ionic 2