Ionic 5中设置IonRow高度除覆盖默认样式外的更优方案咨询

方案1：全局统一定义自定义CSS类（最常用，灵活度高） #

你可以在全局样式文件（如global.scss）或者对应页面的样式文件中提前定义好不同高度的Row类，后续使用时直接给IonRow加class即可，无需重复写内联样式：

/* global.scss 代码 */
.full-height-row {
  height: 100%;
}
.half-height-row {
  height: 50%;
}
.fixed-100-row {
  height: 100px;
}

组件中使用的代码：

<IonGrid style={{ height: "100%" }}>
  <IonRow className="full-height-row">
    <IonCol>Hi</IonCol>
    <IonCol>Hi Again</IonCol>
    <IonCol>Hi A third time</IonCol>
  </IonRow>
</IonGrid>

如果某个页面所有Row都要统一高度，也可以直接给当前页面的根容器加自定义类，批量生效：

/* 页面样式文件 */
.custom-page ion-row {
  height: 80px;
}

方案2：使用Ionic原生CSS变量 #

IonRow 原生支持自定义CSS变量，你可以直接在父容器统一设置变量值，所有子元素的IonRow会自动继承：

/* 全局/页面样式 */
.custom-grid {
  --row-height: 100%;
}
.custom-grid ion-row {
  height: var(--row-height);
}

组件代码：

<IonGrid className="custom-grid" style={{ height: "100%" }}>
  {/* 所有在这个grid里的row自动应用高度，无需单独加属性 */}
  <IonRow>
    <IonCol>Hi</IonCol>
    <IonCol>Hi Again</IonCol>
    <IonCol>Hi A third time</IonCol>
  </IonRow>
  <IonRow>
    <IonCol>第二行自动继承高度</IonCol>
  </IonRow>
</IonGrid>

方案3：封装自定义公共组件（复用率极高场景适用） #

如果你的项目中大量页面都需要用统一规格的IonRow，可以直接封装一层自定义组件，内置样式逻辑：

//  components/MyIonRow.tsx
import { IonRow } from '@ionic/react';
import React from 'react';

const MyIonRow: React.FC<React.ComponentProps<typeof IonRow>> = (props) => {
  return <IonRow style={{height: '100%'}} {...props} />
}

export default MyIonRow;

使用时直接替换原来的IonRow即可，无需额外加样式：

<IonGrid style={{ height: "100%" }}>
  <MyIonRow>
    <IonCol>Hi</IonCol>
    <IonCol>Hi Again</IonCol>
    <IonCol>Hi A third time</IonCol>
  </MyIonRow>
</IonGrid>

方案选择建议 #

• 仅少数Row需要特殊高度：选方案1
• 单个页面/单个Grid内所有Row高度统一：选方案2
• 全项目大量复用相同高度的Row：选方案3

内容的提问来源于stack exchange，提问作者Carl