Overwrite css class property for library component in Angular-5

Question

I have a angular-5 dropdown component from third party library in my code, this component has its own CSS, and due to its default behavior i am unable to change its CSS(here i am trying to reduce width of dropdown), i tried using writing another css class and inline style also but it does not change the width.

HTML code, where i have controlled on my code:(3rd party dropdown component)

    <test-dropdown id="dropdown" label="Options Array"
              [selectedOption]="dropdownOptions[0]">
           <test-option *ngFor="let option of dropdownOptions"
              [option]="option" [disabled]="option.disabled">{{option.label}}  
           </test-option>
    </test-dropdown>

Above dropdown component, after running an application in browser looks like,

    <test-dropdown _ngcontent-c4="" id="dropdown" label="default" ng-reflect-label="default">
  <div class="test-dropdown" ng-reflect-ng-class="[object Object]">
    <label>DropDown</label>
    <div>
      <button class="select">Select...</button>
      <div class="dropdown">
        <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option One
          </button>
        </test-option>
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option Two
          </button>
        </test-option>
        <!--bindings={}-->
      </div>
    </div>
  </div>
</test-dropdown>

In short i want to apply css style on classes, test-dropdown->button.select and test-dropdown->div.dropdown

Answer 1

I used ::ng-deep pseudo-class selector, refereed this Docs https://blog.angular-university.io/angular-host-context for angular view encapsulation.

Below code snippet works for me to overwrite the css property using ng-deep. e.g in my case <test-dropdown> is a angular component which takes default css class .dropdown of it, now i want to modify min-width property so i did it using ng-deep pseudo-class selector, same for other angular component also.

test-dropdown::ng-deep .dropdown {
  min-width: 20%;
}

test-button::ng-deep .test-button {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  text-align: center;
  cursor: pointer;
  min-width: 20%;
}

test-date-picker::ng-deep .date {
  min-width: 100%;
  line-height: 1.42857143;
}

test-date-picker::ng-deep .date-picker {
  min-width: 100%;
  line-height: 1.42857143;
}