Question

如何覆盖离子指令类？我尝试了下面的代码：

<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;
}

边框确实变为红色，但其背景颜色没有变化。

Answer 1

背景并不需要任何特殊的东西，颜色实际上是橙色（ish）。如果您遇到字体颜色问题，只需在元素中添加一个类并更改它的颜色，不要忘记添加!important规则。

我测试了它并且它正在工作，检查下一个片段：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用chrome dev工具检查元素实际上是了解CSS应用于元素的好方法。然后覆盖那些CSS。

检查元素Right click - ＆gt; Inspect element。

要打开chrome dev工具：选择右上角的Chrome Menu，然后选择Tools - ＆gt; Developer Tools。

More info about Chrome DevTools

干杯。

Answer 2

我记得有一个类似的问题在Ionic工作......但它与我在项目中定义样式的位置有关。新类（在本例中为“teamA”）与现有样式冲突，并且它们在仿真时在不同时间应用。

我是如何解决的：
我假设你在模拟器中运行它时仍然可以访问chrome调试器...

由于控制器文件夹结构较短，我们在不同的地方定义了不同的样式...不使用.css的标准离子发生器的位置。
尝试在jQuery中选择项目并检查它们，在可能的情况下手动调整chrome中的background-color属性并查看其效果。

这可能会为您提供有关如何修复它的线索。

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

如何覆盖离子指令类？

2 个答案: