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

Question

总的来说，我对 ionic 和混合应用不熟悉。在使用奶嘴应用程序进行插入和播放时，我没有看到任何 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%。有什么想法吗？

谢谢

Answer 1

我以前遇到过这个问题，我认为这是 Angular 的 View 封装(又名 shadow root)的原因。我通过做这样的事情解决了这个问题:

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

</ion-content>

不完全确定这是否会给您带来您想要的结果，因为我与 Ionic 的合作不多。

编辑

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

首页.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