从 mdc 复选框中移除涟漪效应答案

【问题标题】：Removing the ripple effect from mdc checkbox从 mdc 复选框中移除涟漪效应
【发布时间】：2020-03-10 09:57:21
【问题描述】：

我正在尝试从 Angular 材质复选框中移除这种涟漪效应，因为我有一个很长的列表，并且我希望列表行尽可能接近，波纹与其他复选框重叠。

当前代码是：

  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())

我不确定如何使用，因为当我包含它时，它就不起作用了。有没有办法消除我在库中忽略的某个类的涟漪？

【问题讨论】：

标签： reactjs sass material-components-web

【解决方案1】：

试试这个

.mdc-checkbox .mdc-ripple-surface.mdc-ripple-upgraded:after {
    display: none !important;
}

或

.mdc-checkbox__ripple{
    display: none !important;
}

【讨论】：

@user6537157 尝试将此.mdc-checkbox__ripple 设置为display:none
不，只有这个对我有用stackoverflow.com/a/58955389/6537157
您使用了哪个版本的角材料（可能是我们的问题）？ :D
最新的我不确定

【解决方案2】：

也许您必须使用其他选择器（我不使用类选择器）。

mdc-checkbox {
  --mdc-ripple-fg-size: 0 !important;
}

编辑

似乎这只适用于"@angular-mdc/web": "3.2.1"

【讨论】：