材质ui复选框css以角度覆盖整个组件

问题描述

我正在尝试在Home组件中覆盖材质UI复选框css，并且它工作正常。但是有一些副作用，例如表单组件中的复选框的css被覆盖。谁能为此提出解决方案。

使用HTML

handleSubmit = () => {
  fetch('http://localhost:3000/resources',{
      method: 'POST',headers: {
        'Content-Type': 'application/json',Accept: 'application/json'
      },body: JSON.stringify({
        name: this.state.name,description: this.state.description,link: this.state.link,topic_id: this.state.topic_id
      })
    })
    .then(res => res.json())
    .then(data => {
      this.props.addResource(data)
      var dataId = data.id;
    })

  return fetch('http://localhost:3000/user_resources',body: JSON.stringify({
        resource_id: dataId,user_id: this.props.users.id
      })
    })
    .then(res => res.json())
    .then(data => {
      this.props.addUserResource(data)
    })

  this.props.navigation.goBack()
}

默认用于超骑的css是灰色

 <mat-checkBox formControlName="home">
  Home
</mat-checkBox>

形成组件垫复选框-该组件还将边框颜色覆盖为蓝色，而无需编写任何CSS

::ng-deep .mat-checkBox .mat-checkBox-frame {
border-color: blue !important;
}

我相信这是由于使用 :: ng-deep

而发生的

我什至在Home组件中也尝试过 ViewEncapsulation 。它仍然覆盖了Form组件中的CSS和这两个组件中的其他CSS。

任何对此的帮助，将不胜感激。

解决方法

要仅在特定的子组件中应用样式，请将:host选择器添加到该组件的CSS中的以下代码中：

:host ::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: blue !important;
}

这会将此规则的范围限制在此当前组件及其所有子组件中的所有复选框，并且在路由组件的情况下效果很好。

但是，如果您只想将此css规则用于首页模板，则可以使用：

home.component.css

.mat-checkbox ::ng-deep  .mat-checkbox-frame {
  border-color: blue !important;
}

Angular将其替换为：

.mat-checkbox[_ngcontent-rvb-c0] .mat-checkbox-frame {
    border-color: blue !important;
}

其中_ngcontent-rvb-c0是当前组件的唯一标识符

angular angular-material html