0

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

链接到文档。这是我正在使用的代码：

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;
}

4

1 回答 1

0

在反应中，它是className，不是class

于 2020-07-05T23:43:25.850 回答