Question

我应该如何尝试自定义超出其提供的SASS变量范围的现有UI组件？

例如，我想自定义ion-navbar的边框，并使iOS和Android的设计保持平稳。有从头开始创建组件的可能性，但我想知道是否可以在调整其SASS变量的范围之外定制现有<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://streamable.com"> </head> <body> <div style="width:100%;height:0px;position:relative;padding-bottom:100.000%;"><iframe src="https://streamable.com/s/aqg9y/uknjqm" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div> </body> </html>。

Answer 1

您可以在＆＃34; node_modules＆＃34;中找到ion-navbar的代码。＆GT; ＆＃34;离子 - 角＆＃34; ＆GT; ＆＃34;组分＆＃34; ＆GT; ＆＃34;工具栏＆＃34;并从那里定制。

但是，我强烈建议您创建自己的自定义导航栏组件并从那里使用它。

Answer 2

仔细阅读完文档后，我在这里找到答案：

https://ionicframework.com/docs/theming/platform-specific-styles/#overriding-the-mode-styles

我们只需要将.md和.ios css类添加到我们要自定义的组件中。例如，要自定义按钮：

.md .ios .button {
  /* Your custom css here */
}

Ionic定制现有的UI组件

2 个答案: