从mdc复选框中消除波纹效应

Question

我正在尝试从角形材质复选框中消除这种波纹效果， 由于我的清单很长，而且我希望清单的行尽可能地靠近， 波纹与其他复选框重叠。

当前代码为：

  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 mdc-checkbox-without-ripple($query: mdc-feature-all())

我不确定该如何使用，因为当我包含它时，它根本不起作用。 有什么方法可以消除某些类的波动，而我在库中忽略了这一点？

Answer 1

尝试一下

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

OR

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

Answer 2

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

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

编辑

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