reactjs - 从 mdc 复选框中移除涟漪效应
问题描述
我正在尝试从角度材料复选框中删除这种涟漪效应,因为我有一个很长的列表,并且我希望列表行尽可能接近,涟漪与其他复选框重叠。
当前代码是:
render() {
return (
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input
type="checkbox"
class="mdc-checkbox__native-control"
disabled={this.disabled}
checked={this.isChecked}
onChange={this.onChangeAction}
/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark" />
</div>
</div>
</div>
);
}
通过检查@material/checkbox(版本3.2.0),我看到有一个mixin
@mixin mdc-checkbox-without-ripple($query: mdc-feature-all())
我不确定如何使用,因为当我包含它时,它就不起作用。有没有办法通过某个类来消除我在图书馆中忽略的涟漪?
解决方案
也许您必须使用其他选择器(我不使用类选择器)。
mdc-checkbox {
--mdc-ripple-fg-size: 0 !important;
}
编辑
似乎这只适用于"@angular-mdc/web": "3.2.1"
推荐阅读
- java - ColdFusion 2016 REST 服务 API:错误 java.text.ParseException:预期分隔符 '/' 而不是 ';'
- angular - 需要 Angular 自定义组件
- java - android studio 编译器无法识别 GraphicOverlay 类
- bitlocker - 无法为 Bitlocker 设置 TPM+PIN 模式 (0x80310060)
- google-cloud-storage - 具有 Google Cloud Storage 连接的 Azure Logic 应用
- angular - 任何对 angular 2 和 socket.io 有深入了解的人都可以订阅给定的服务
- c++ - 构建 Qt 应用程序时如何运行 git 命令
- tensorflow - 我需要训练图像中的每个类来进行对象检测吗?
- eclipse - 如何在 Mac OS 上的 IntelliJ IDEA 2018.1 中设置 Equinox OSGI 框架
- javascript - 在第三级获取 igHierarchicalGrid 的子级