reactjs - Ionic 6 React：更改 IonItem 线条颜色

Question

我想改变这个的边框底部IonItem，

我尝试添加一个名为border-light的类

<IonItem
  lines="inset"
  color="primary"
  className="ion-align-items-center ion-margin-vertical border-light"
 >

和CSS

.border-light {
  --border-color: var(--ion-color-light);
}

Answer 1

模板：

<IonItem
  lines="none"
  color="primary"
  className="ion-align-items-center ion-margin-vertical border-light"
 >

CSS：

IonItem.border-light{
--border-color: var(--ion-color-light) !important; // to override primary class style
--border-style:inset;   
--border-width:2px;
border-top-style :none;
border-right-style :none;
border-left-style :none;
}