html - 如何使用 HTML 和 CSS 重新创建相同的 Angular Material 切换选择代码？

Question

我正在尝试将此（https://stackblitz.com/edit/historical-toggle-p82shy?file=src%2Fapp%2Fbutton-toggle-overview-example.html）添加到我的 Angular 项目中，但是在样式中遇到问题css。是因为我无法覆盖默认值吗？我找到了这个来源：https ://material.angular.io/guide/customizing-component-styles

有没有办法仅使用 HTML 和 CSS 重新创建此代码？我的问题主要是添加下拉选择。我希望能够在所有选择之间切换。但是，如果我将“按月”选项分开，其他输入选项之一将保持活动状态，即使这不是我选择的当前选项。想法？

提前致谢！

Answer 1

我想您不需要从头开始编写按钮切换。有树选项可以覆盖封装的 CSS：

1. 将您的选择器放在全局 CSS 中（例如 style.scss 文件）。
2. 在使用按钮切换的组件中禁用视图封装：

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

3. 使用 ::ng-deep。