如何覆盖材质 CSS 样式?

2024-03-03

我使用角度材质 2。

Material CSS 中有一种 CSS 样式:

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #fff;
}

我尝试在自定义 CSS 文件中覆盖它,例如:

.mat-radio-button.mat-accent .mat-radio-inner-circle {   background-color: red !important; }

我也尝试过这个:

/deep/ .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: red !important;
}

它不起作用,如何正确执行此操作以及在哪里执行此操作?


您可以在全局样式表中执行此操作(style.scss),或者在任何样式表中not封装的。

要覆盖,请通过检查浏览器中的 HTML 元素来获取选择器,然后覆盖所需的属性。

如果仍然失败,您可以使用!important强制应用样式。

请记住在您的样式表导入中订购angular.json也提交文件(谢谢@SurenSrapyan提醒我)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何覆盖材质 CSS 样式? 的相关文章

  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将
  • 创建 AoT 兼容的服务工厂

    我正在尝试为缓存服务创建一个服务工厂 主要要求是每次可以使用不同的字符串实例化单个服务 最终的结果会有多个cache每个服务都由唯一定义databaseName 每个缓存可以有一个或多个stores也由唯一定义storeName 其他服务将
  • StaticInjectorError[e -> e]: NullInjectorError: 没有 e 的提供程序

    在我的 app module ts 中 NgModule declarations AppComponent imports BrowserModule MaterialModule FlexLayoutModule BrowserAnim
  • Angular 4 显示其中的数据

    我不喜欢从 API 返回到我的 Angular 4 应用程序的数据 这是 JSON 的示例 我不关心美元 但这是我正在处理的数据类型 最终目标是在页面上展示 Coin Price BTC 4 281 28 ETH 294 62 etc JS
  • 如何禁用 ng2-dragula 上的某些元素的拖动

    我想在顶部显示名称组并取消其上的拖动事件 如何禁用移动某些元素 例如该组名称位于顶部 我的代码是 dragulaService drag subscribe value gt console log drag value 0 我的模板 di
  • Angular 2:基于环境导入服务

    根据 Angular CLI 项目中的当前环境导入服务的最佳 正确方法是什么 我已经设置了一个名为 dev mock 的新环境 我可以使用它来调用 ng serve environment mock 然后我使用 useClass 在模块中设
  • Angular 2 Material 2 日期选择器日期格式

    我不知道如何更改材料2日期选择器的日期格式 我已阅读文档 但我不明白我实际上需要做什么 datepicker默认提供的输出日期格式为f e 6 9 2017 我想要实现的目标是将格式更改为类似的格式9 Jun 2017或任何其他 文档htt
  • 构建:找不到“节点”的类型定义文件

    VS 2015 社区版 在家 npm 3 10 Angular 2 我试图在 ASP Net MVC 5 应用程序中获取 Angular2 设置 我开始使用的模板使用旧版本的 Angular 因此我更新了包引用 当我构建时 列表中的第一个错
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • 如何在 Angular 项目中使用 Bootstrap?

    我开始我的第一次Angular应用程序和我的基本设置已完成 我怎样才能添加引导程序我的申请 如果您可以提供一个示例 那么这将是一个很大的帮助 如果您使用Angular CLI要生成新项目 还有另一种方法可以使 bootstrap 可访问角度
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • 如何将窗口注入到服务中?

    我正在用 TypeScript 编写一个 Angular 2 服务 它将利用localstorage 我想注入对浏览器的引用window对象到我的服务中 因为我不想引用任何全局变量 例如 Angular 1 x window 我怎么做 这目
  • Angular 7:ng 测试挂起,不断重复运行测试

    我最近将 Angular 6 应用程序迁移到角7 my 包 json看起来像这样 name myApp version 3 0 0 license MIT scripts ng ng start ng serve public host h
  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我
  • 使用 Angular 2 的前端“微服务”

    我正在为一些奇怪的情况寻找解决方案 让我们快速浏览一下 angular2 seed 项目 以便我可以更好地解释 https github com mgechev angular2 seed tree master src client ap
  • 无法读取未定义的“触及”属性

    为什么我会收到此错误无法读取未定义的属性 为什么无法读取formName controls email touched但它能够阅读formName get custDetails touched
  • 找不到“节点”的类型定义文件

    更新 Angular Webpack 和 TypeScript 后出现奇怪的错误 知道我可能会错过什么吗 当我使用 npm start 运行应用程序时 出现以下错误 at loader Cannot find type definition
  • 如何让 vsCode 了解自动补全的深度依赖导入?

    我创建了多个角度库 让我可以使用一堆组件更快地创建网站 例如 sidenav 卡片 我创建了一个 超级库 来导入所有这些库 这样我就可以使用npm i myWebsiteBundle立即下载所有依赖项 我已将每个类似的插件列入白名单ng p
  • 如何读取firebase推送通知内容并在ionic2中触发方法?

    是否可以访问push notificationionic 2 中的内容并在通知到达时执行一堆代码或event fire 我建议使用科尔多瓦插件 firebase https github com arnesson cordova plugi
  • 当选项卡索引更改时,mat-tab-group 滚动到页面顶部

    我有奇怪的行为mat tab group在角度材料中 当我更改选项卡索引时 它会将页面滚动到顶部 知道为什么吗 这是角度材料库中的一个已知错误 请参阅here https github com angular material2 issue

随机推荐