css 代码不适用于 ionic 2 中的按钮

一般来说，我对离子和混合应用程序很陌生。在插入和使用奶嘴应用程序时，我没有看到任何 CSS 工作。我究竟做错了什么？ 这是我的文件： 测试.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%。有任何想法吗？

Thanks

我以前遇到过这个问题，我认为这是 Angular 视图封装（又名影子根）的原因。我通过做这样的事情来解决这个问题：

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

</ion-content>

不完全确定这是否会给你带来你想要的结果，因为我没有太多地使用 Ionic。

EDIT

在评论中的对话之后，我创建了一个具有所需行为的工作 plnkr。

home.ts

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

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

首页.html

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

样式.css

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

Plnkr https://embed.plnkr.co/Ceb4CKzSFH9K6wiTO9tQ/