Ionic React无法在IonItem中使用flexbox或加载外部.css

Question

问题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>
但是它不起作用。我想念什么？

谢谢

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

Answer 1

不要将其包装在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>