Ionic Item Ripple Effect

Hello Everyone,

I am trying to override the ripple effect color of ion-item and im failing at that.

        <ion-item
          class="contract-item"
          v-for="contract in contracts"
          :key="contract.id"
          button="true"
          @click="goToContract(contract.id)"
        >
          <ContractItem :contract="contract" />
        </ion-item>

And the CSS Styking looks like this

.contract-item {
    margin-top: 5%;
    -webkit-margin-start: 5%;
    -webkit-margin-end: 5%;
    box-shadow: 0.5px 1px 3px 0.5px #9d9d9d;
    border-radius: 8px;
    --ripple-color: rgb(95, 15, 15) !important;
}

Am i using the --ripple-color wrong here?

1 post - 1 participant

Read full topic