Angular2: style md-radio-button and md-checkbox

Question

I've an angular2 app, with an md-radio-button and md-checkbox components, but i'm not able to change styles of this component. I've try different modes, but whithout success. Any suggestion?

Answer 1

After md-checkbox or any ui component is rendered it'll look like something as given below. you can add class to main component and pick the child html tags directly and style them up. this is mdl-checkbox from angular2-mdl

mdl-checkbox

<mdl-checkbox class="mycheckbox mdl-checkbox is-upgraded ng-untouched ng-pristine ng-valid">
 <input class="mdl-checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox">
 <span class="mdl-checkbox__label"> General </span>
 <span class="mdl-checkbox__focus-helper"></span>
 <span class="mdl-checkbox__box-outline">
  <span class="mdl-checkbox__tick-outline"></span>
 </span>
</mdl-checkbox>

My custom css

.mycheckbox .mdl-checkbox__input{
 background-color: #f00;
}