时间戳

首页 > 解决方案 > Ionic React 不能在 IonItem 中使用 flexbox 或加载外部 .css

css - Ionic React 不能在 IonItem 中使用 flexbox 或加载外部 .css

问题描述

问题 1
我正在尝试设置组件的样式，以便使用此代码将 2 个标签放在列中

<IonContent>
        <IonList>
          {
            articles.map((article: any) => {
              return <IonItem
                style={{ display: 'flex', flexDirection: 'row', height: '100%', width:'100%' }}
                key={article.Title}
                onClick={() => browser.create(article.Link)}>
                <IonLabel style={{ fontSize: 14 }} >{article.Title}</IonLabel>
                <IonLabel style={{ fontSize: 11 }}>{article.Magazine}</IonLabel>
              </IonItem>
            })
          }

        </IonList>
      </IonContent>

标签正确地得到新的fontSize，但IonItem不会改变 2 的显示方向。
我错过了什么吗？

问题 2
我决定使用内联样式，因为我无法加载.css零件。首先我将代码导入Home.tsx

import './Home.css';

另一方面，它包含以下代码（Home.css）：

.title {
    font-size: 12;
}

然后我用它

<IonLabel class="title">{article.Title}</IonLabel>

但它不起作用。我错过了什么？

谢谢

标签： cssreactjsionic-frameworkionic-native

解决方案

不要将它包装在一个中ion-item并且css应该可以工作......如果你想使用ion-item那么你将需要覆盖类.input-wrapper

<div
  style={{
    display: "flex",
    flexDirection: "column",
    width: "100%",
  }}
  key={article.Title}
>
  <div style={{ fontSize: 14, flex: 1 }}>{article.Title}</div>
  <div style={{ fontSize: 11, flex: 1 }}>{article.Magazine}</div>
</div>

推荐阅读