Ionic-React:无法使用CSS类自定义单个IonSelectOption

Question

我正在尝试用一个自定义的CSS类来定制一个IonSelectOption来改变一个IonSelectOption的颜色。我正在从Ionic的文档中复制粘贴代码，但它仍然不能工作。我提供给IonSelectOption的CSS className似乎没有传递到它选择的任何接口。希望有人能帮帮我！

Link to Documentation.这是我使用的代码：

​

import React from 'react';
import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react';

const options = {
  cssClass: 'my-custom-interface'
};

export const SelectOptionExample: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <IonItem>
          <IonLabel>Select</IonLabel>
          <IonSelect interface="popover" interfaceOptions={options}>
            <IonSelectOption value="brown" class="brown-option">Brown</IonSelectOption>
            <IonSelectOption value="blonde">Blonde</IonSelectOption>
            <IonSelectOption value="black">Black</IonSelectOption>
            <IonSelectOption value="red">Red</IonSelectOption>
          </IonSelect>
        </IonItem>
      </IonContent>
    </IonPage>
  );
};

​

和CSS：

​

/* Popover Interface: set color for the popover using Item's CSS variables */
.my-custom-interface .brown-option {
  --color: #5e3e2c;
  --color-hover: #362419;
}

​

Answer 1

在react中，是className，而不是class