reactjs - 从 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

@mixin mdc-checkbox-without-ripple($query: mdc-feature-all())

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

Answer 1

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

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

编辑

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

Answer 2

尝试这个

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

或者

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