How can I recreate this same Angular Material toggle selection code using HTML and CSS?

Question

I am trying to add this (https://stackblitz.com/edit/historical-toggle-p82shy?file=src%2Fapp%2Fbutton-toggle-overview-example.html) to my Angular project, but having issues styling it in css. Is it because I can't overwrite the defaults? I found this source: https://material.angular.io/guide/customizing-component-styles

Is there a way to recreate this code using HTML and CSS only? My issue is mainly adding the drop down selection. I want to be able to toggle between all the selections. But if I keep the By Month option separate, one of the other input selections will stay active even though that is not the current option I am selecting. Thoughts?

Thanks in advance!

Answer 1

I guess you don't need to write button toggle from scratch. There're tree options to override encapsulated CSS:

1. Put your selectors in global CSS (e.g. style.scss file).
2. Disable view encapsulation in the component where button-toggle is used:

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

3. Using ::ng-deep.