如何更改 mat-slide-toggle 的颜色属性/覆盖组件的 CSS?

2024-05-26

有什么办法可以改变颜色属性mat-slide-toggleAngular Material 组件库中的组件?如何覆盖它的样式?

或者有人可以建议我任何其他用于 Angular 5 应用程序的滑动开关,例如材料滑动开关?


您可以更改原色mat-slide-toggle在您的组件样式中使用以下 css。

/deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #49c5b6;
}

/deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #49c5b6;
}

上面的代码是在 Angular 上测试的5+版本以及正在运行的版本。

组件样式通常仅适用于组件中的 HTML 自己的模板。

Use the /deep/阴影穿透后代组合器强制形成样式 向下遍历子组件树进入所有子组件 意见。这/deep/组合器适用于任何深度的嵌套组件, 它适用于视图子级和内容子级 成分。

您可以花一些时间在这里阅读有关深度选择器的更多信息。

https://angular.io/guide/component-styles#deep https://angular.io/guide/component-styles#deep

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

如何更改 mat-slide-toggle 的颜色属性/覆盖组件的 CSS? 的相关文章

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • 如何在Yii框架中向Form添加类?

    我在 Yii 中有一个表单 我想向该表单添加一个类
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮
  • SVG 动画不适用于 Chrome 中的 favicon

    In the SVG 图标已设置 这是旋转内圆的SVG文件的内容 Favicon 动画在 Chrome 中根本不起作用 如何让它在 Chrome 中工作 在 Firefox 中可以正常工作 在 Edge 中则不行 但 Chrome 是最重要
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • CSS:仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C

随机推荐

  • 使用 jQuery 从字符中获取文本

    我想在出现特定字符后从字符串中获取文本 比方说 文本文本文本 abc 我想得到 abc jquery 中这是如何完成的 这对某些人来说可能是微不足道的 但我对 jQuery 没有什么经验 你可以这样做 var text texttextte
  • 有没有用于iPhone开发的高级手势库?

    iPhone 平台有许多常见的手势习惯用法 例如 有轻击 捏合和滑动等操作 每种操作都需要不同数量的手指 但是 当您开发应用程序时 您需要根据有关触摸次数和位置的低级信息来实现这些内容 看起来这是图书馆的主要候选者 您将注册一个委托 设置一
  • Excel的解析路径

    其实我想问以下问题 对于位于 目录中定义的 PATH 怎么能 我找出这些目录中的哪个 找到了 因为我需要使用 Process Run 从 C 运行 Excel 并且只需指示 Excel 即可正常工作 Windows 似乎知道在哪里可以找到它
  • 如何获取sql server 2005中数据库连接的详细列表?

    如何获取sql server 2005中数据库连接的详细列表 使用系统存储过程sp who2
  • Vue SPA - 如何在浏览器中呈现时隐藏 .vue 文件

    我正在开发一个用 Vue js 开发的单页应用程序 托管在 Node js 服务器上 目前它仍在开发中 但最终将暴露给外部客户 并且由于我们将处理敏感数据 我们希望避免在用户检查元素时看到 vue 文件和相对文件树结构在开发工具中 See
  • Magento 路由器 URL - 需要连字符的路径名称

    假设我使用自定义控制器 其 url 路径 前端名称为 customcategory 好吧 显然如果我有一个名为 TestController php 和indexAction的控制器文件 url 路径将是 customcategory te
  • 在tinymce 4中裁剪后上传图像

    我正在开发tinymce 并且已经实现了imagetools 现在 当图像插入到文本编辑器中 然后我编辑 裁剪图像时 它将图像 src 更改为类似的内容blob www localhost asdf ghij 我想要的是裁剪后我可以将此 u
  • PHP crypt() Blowfish 函数不工作

    这是我第一次在 PHP 中使用 crypt 函数 我不明白为什么它不起作用 我的代码基于这篇文章 http www techrepublic com blog australia secure passwords with blowfish
  • 跨数据库管理系统检查字符串是否为数字的方法

    好的 我有这个字段 code varchar 255 它包含我们导出例程中使用的一些值 例如 DB84 DB34 3567 3568 我需要仅选择自动生成的 全数字 字段 WHERE is numeric table code is num
  • 如何使用 ui-router 获取带有参数的先前状态

    问题陈述 我有一个 添加评论 按钮 只有当我登录系统时我才应该能够添加评论 但问题是我登录后无法返回 添加评论 页面 因为我不知道之前的状态或无法获取之前的状态 有没有更清洁的解决方案 我应该将登录页面设置为模态页面而不是新页面吗 我已经看
  • 在单个 C# 泛型方法中返回可为 null 和 null?

    C 泛型方法是否可以返回对象类型或 Nullable 类型 例如 如果我有一个安全的索引访问器List我想返回一个值 稍后我可以使用以下任一方法检查该值 null or HasValue 目前我有以下两种方法 static T SafeGe
  • 指针的 Fortran 副本

    我有一个包含指针 p 的 var 类型 我需要将 var 复制到与 var 类型相同的另一个变量 var1 上 通过执行 var1 var 在引号中 因为我不知道这是否是正确的方法 请参见下文 在我的实现中 var 和 var1 被传递给一
  • 是否可以在水晶报表中显示文本文件的内容

    我有一个水晶报告 其中包含绝对引用的文本文件的列表 每个正文行引用一个文本文件 e g line1 c file1 txt line2 c file2 txt 有什么办法可以在Crystal中显示这些文件的内容吗 即我希望每个水晶体线显示引
  • C++:Linux平台上的线程同步场景

    我正在为 Linux 平台实现多线程 C 程序 其中我需要类似于 WaitForMultipleObjects 的功能 在搜索解决方案时 我发现有一些文章描述了如何在 Linux 中实现 WaitForMultipleObjects 功能
  • 在 Blazor 中逃脱 @

    我想在 Blazor 组件中显示图标库中的图像 路径是 wwwroot lib icon open iconic icons account login svg But 是 Blazor 中的一个特殊角色 Quoting 剃刀语法 http
  • scrapy蜘蛛如何将值返回给另一个蜘蛛

    我正在爬行的网站包含许多玩家 当我点击任何玩家时 我都可以进入他的页面 网站结构是这样的
  • jQuery 文件上传:是否可以使用提交按钮触发上传?

    我在用着jQuery 文件上传 https github com blueimp jQuery File Upload用于基于 AJAX 的上传 它总是在选择文件后开始上传 是否可以更改行为以使用 提交 按钮 我知道问题 35 https
  • Rails 命令有什么区别:--no-test-framework、--skip-test-unit 和 -T?

    原本我以为这三者都是一样的 但现在仔细一看 却发现它们各有不同 我通过搜索找不到任何关于此的好的文档 根据导轨API http api rubyonrails org classes Rails Generators Base html a
  • 如何为我的文件格式选择一个好的幻数?

    我正在从头开始设计一个二进制文件格式 我想在开头包含一些魔术字节 以便可以轻松识别它 我该如何选择哪些字节 我不知道有任何幻数的中央注册表 所以这只是一个随机选择一些尚未被附近 UNIX 机器上的文件命令识别的东西的问题吗 远离超短的神奇数
  • 如何更改 mat-slide-toggle 的颜色属性/覆盖组件的 CSS?

    有什么办法可以改变颜色属性mat slide toggleAngular Material 组件库中的组件 如何覆盖它的样式 或者有人可以建议我任何其他用于 Angular 5 应用程序的滑动开关 例如材料滑动开关 您可以更改原色mat s