How to override class of ionic directive?

Question

How to override class of ionic directive?

How to override class of ionic directive? I tried the code below:

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

The border did change to red but its background-color didn't change.

ionic-framework

Answer 1

The background didn't need anything special, that color is actually orange(ish). If you had problems with the font color, just add a class to your element and change it's color, don't forget to add the !important rule.

I tested it and it's working, check the next snippet:

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>

Inspecting elements with chrome dev tools is actually a good way to learn what CSS's are beign applied to your elements. And then override those CSS.

To inspect an element Right click --> Inspect element.

To open chrome dev tools: Select the Chrome Menu at the top-right corner, then select Tools -> Developer Tools.

More info about Chrome DevTools

Cheers.

Answer 2

I remember having a similar problem working in Ionic...but it had to do with where my styles were defined in the project. The new class (in this case, "teamA") was conflicting with existing styles, and they were being applied at different times at emulation-time.

How I solved it:
I assume you can still access chrome debugger when running this in emulator...

We were defining different styles in different places due to a short controller folder structure...not using the standard ionic generator's location for .css.
Try selecting your items in jQuery and examining them, manually adjusting the background-color property in chrome when you can and see what effects that has.

That might give you clues as to how to fix it.

This might also help: http://forum.ionicframework.com/t/ion-list-background-color/2774/7