如何重写ionic指令的类

如何重写ionic指令的class ?我尝试了下面的代码:

<div class="card">
    <ion-item   class="item item-avatar item-text-wrap teamA" ng-repeat="chat in chats">         
        <p>{{chat.message}}</p>
    </ion-item>
</div>
.teamA{
   border: 1px solid red !important;
   background-color: #EBA32F !important;
   color: black;
}

边框变为红色，但背景色不变

背景不需要任何特殊的颜色，这个颜色实际上是橙色的。如果你的字体颜色有问题，只需添加一个类到你的元素，并改变它的颜色，不要忘记添加!important规则。

我测试了它，它正在工作，检查下一个代码片段:

angular.module('myApp', ['ionic'])
.controller('MyCtrl', function ($scope){
  $scope.chats = {};
  var chats = [], 
      chat;
  
  for (var i = 0; i< 10; i++) {
    chat = {
      id: i,
      message: "Chat num: " + i
    };
    chats.push(chat);
  }
  $scope.chats = chats;
  console.log(chats);
});

.teamA{
   border: 1px solid red !important;
   background-color: #EBA32F !important;
}
.your-color {
  color: white !important;
}

<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Content color</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    <ion-content scrollable="true">
      <div class="card">
    <ion-item   class="item item-avatar item-text-wrap teamA" ng-repeat="chat in chats">         
        <p class="your-color">{{chat.message}}</p>
    </ion-item>
</div>
    </ion-content>
  </body>
</html>

使用chrome开发工具检查元素实际上是了解哪些CSS开始应用于元素的好方法。然后重写这些CSS。

检查元素Right click—> Inspect element。

打开chrome开发工具:选择右上角的Chrome Menu，然后选择Tools -> Developer Tools。

关于Chrome DevTools的更多信息

欢呼。

我记得在Ionic中有一个类似的问题…但这与我的风格在项目中的定义有关。新类(在本例中为"teamA")与现有的样式相冲突，并且它们在仿真时的不同时间被应用。

如何解决:
我假设你仍然可以访问chrome调试器时运行这个模拟器…

由于控制器文件夹结构短，我们在不同的地方定义了不同的样式…没有使用.css的标准离子生成器的位置。
尝试选择你的项目在jQuery和检查他们，手动调整background-color属性在chrome当你可以，看看有什么效果。

这可能会给你一些如何修复它的线索。

这可能也有帮助:http://forum.ionicframework.com/t/ion-list-background-color/2774/7

相关内容

最新更新

热门标签：