Overriding SASS variables per component

Ionic Framework ionic-v3
1

I’m trying to hide the highlight box around an ion-textarea in one specific area of my application. The relevant variables seem to be:

$text-input-ios-show-focus-highlight
$text-input-md-show-focus-highlight
$text-input-wp-show-focus-highlight

Is it possible to override these variables for one specific input, instead of globally overriding them throughout the app?

page-whatever {
  .custom-textarea {
    // Override for this only
  }
}

The structure looks something like this:

<ion-item no-lines>
  <ion-textarea class="custom-textarea"></ion-textarea>
  <button ion-button item-right clear icon-only>
    <ion-icon name="thumbs-up"></ion-icon>
  </button>
</ion-item>
1 Like
2

This kind of goes against the point of the sass variables. They’re meant to be global settings, not component specific ones.
You’d be better off writing component specific styles for this than modifying the variables

3 Likes