如何在不更新整个应用程序背景颜色的情况下更改 ion-radio 的背景颜色？

Question

我正在尝试更改下面ion-radio-group 的背景以匹配其他行：

我在下面展示了我的 HTML 和 CSS。

我尝试将rowStyle 类添加到行中。这会改变行的背景，但单选按钮仍显示为蓝色。

如果我在 CSS 中为 ion-content 更新 --ion-background-color 值，单选按钮背景会发生变化，但整个页面也会发生变化。

我只希望所有行都匹配。

谁能告诉我怎么做？

<ion-content>
  <ion-grid style="width: 75%">

    <ion-radio-group [(ngModel)]="userType">
      <ion-row class="rowStyle">
        <ion-item>
          <ion-label>Customer</ion-label>
          <ion-radio value="customer"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>Supplier</ion-label>
          <ion-radio value="supplier"></ion-radio>
        </ion-item>
      </ion-row>
    </ion-radio-group>

    <ion-row class="rowStyle">
      <ion-icon name="person" color="secondary"></ion-icon>
      <ion-input type="text" placeholder="Your Name" [(ngModel)]="name"></ion-input>
    </ion-row>

    <ion-row class="rowStyle">
      <ion-icon name="mail" color="secondary"></ion-icon>
      <ion-input type="email" placeholder="Your Email" [(ngModel)]="email"></ion-input>
    </ion-row>

    <ion-row class="rowStyle">
      <ion-icon name="key" color="secondary"></ion-icon>
      <ion-input type="password" placeholder="Your Password" [(ngModel)]="password"></ion-input>
    </ion-row>

    <ion-button expand="block" shape="round" fill="outline" color="light" style="margin-top: 20px;" (click)="signUp()">Sign Up</ion-button>
  </ion-grid>
</ion-content>



ion-content {
    --ion-background-color:#3dc2ff;
  }

  .logo { 
    font-size: 25vh;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  h1, h6 {
    color: white;
    font-size: 1em;
    background-color: danger
  }

  .rowStyle {
    background-color: white;
    padding-left: 10px;
    border-radius: 30px;
    margin-bottom: 10px;

    ion-icon {
      margin-top: 13px;
      margin-right: 10px;
    }
  }

我将rowStyleclass 添加到该行。标签的背景显示为白色，但 2 个单选按钮的背景没有改变。

这是我尝试应用第一个答案时的样子：

Answer 1

您可以通过以下两种方式处理它：

1. 创建一个选择器类并添加color。 或
2. 您应该使用ion-item 来获取要更改的值：

ion-content {
  --ion-background-color: #3dc2ff;
}

.logo {
  font-size: 25vh;
  margin-top: 40px;
  margin-bottom: 20px;
}

h1,
h6 {
  color: white;
  font-size: 1em;
  background-color: danger
}

.rowStyle {
  background-color: white;
  padding-left: 10px;
  border-radius: 30px;
  margin-bottom: 10px;
}

ion-item {
  padding: 5px;
  border: 1px solid black;
  background-color: red;
  color: white;
}

<ion-content>
  <ion-grid style="width: 75%">

    <ion-radio-group [(ngModel)]="userType">
      <ion-row class="rowStyle">
        <ion-item>
          <ion-label>Customer</ion-label>
          <ion-radio value="customer"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>Supplier</ion-label>
          <ion-radio value="supplier"></ion-radio>
        </ion-item>
      </ion-row>
    </ion-radio-group>

    <ion-row class="rowStyle">
      <ion-icon name="person" color="secondary"></ion-icon>
      <ion-input type="text" placeholder="Your Name" [(ngModel)]="name"></ion-input>
    </ion-row>

    <ion-row class="rowStyle">
      <ion-icon name="mail" color="secondary"></ion-icon>
      <ion-input type="email" placeholder="Your Email" [(ngModel)]="email"></ion-input>
    </ion-row>

    <ion-row class="rowStyle">
      <ion-icon name="key" color="secondary"></ion-icon>
      <ion-input type="password" placeholder="Your Password" [(ngModel)]="password"></ion-input>
    </ion-row>

    <ion-button expand="block" shape="round" fill="outline" color="light" style="margin-top: 20px;" (click)="signUp()">Sign Up</ion-button>
  </ion-grid>
</ion-content>

或

使用selector 类：

ion-content {
  --ion-background-color: #3dc2ff;
}

.logo {
  font-size: 25vh;
  margin-top: 40px;
  margin-bottom: 20px;
}

h1,
h6 {
  color: white;
  font-size: 1em;
  background-color: danger
}

.rowStyle {
  background-color: white;
  padding-left: 10px;
  border-radius: 30px;
  margin-bottom: 10px;
}

.radioBtn {
  padding: 5px;
  border: 1px solid black;
  background-color: red;
}

<ion-content>
  <ion-grid style="width: 75%">

    <ion-radio-group [(ngModel)]="userType">
      <ion-row class="rowStyle">
        <ion-item>
          <ion-label class="radioBtn">Customer</ion-label>
          <ion-radio value="customer"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label class="radioBtn">Supplier</ion-label>
          <ion-radio value="supplier"></ion-radio>
        </ion-item>
      </ion-row>
    </ion-radio-group>

    <ion-row class="rowStyle">
      <ion-icon name="person" color="secondary"></ion-icon>
      <ion-input type="text" placeholder="Your Name" [(ngModel)]="name"></ion-input>
    </ion-row>

    <ion-row class="rowStyle">
      <ion-icon name="mail" color="secondary"></ion-icon>
      <ion-input type="email" placeholder="Your Email" [(ngModel)]="email"></ion-input>
    </ion-row>

    <ion-row class="rowStyle">
      <ion-icon name="key" color="secondary"></ion-icon>
      <ion-input type="password" placeholder="Your Password" [(ngModel)]="password"></ion-input>
    </ion-row>

    <ion-button expand="block" shape="round" fill="outline" color="light" style="margin-top: 20px;" (click)="signUp()">Sign Up</ion-button>
  </ion-grid>
</ion-content>