ion-item 内部的 SCSS 样式（Ionic 框架）

Posted 2023-03-13

【中文标题】ion-item 内部的 SCSS 样式（Ionic 框架）

【英文标题】：SCSS styling inside of ion-item (Ionic framework)

【发布时间】：2021-10-29 15:11:12

【问题描述】：

我正在努力使样式正确。我认为这与各种离子标签的样式层次结构有关，但我不确定。

在我的应用程序中，我试图将一些 <ion-button> 标签居中在 <ion-grid> 的列内。

我不断得到的结果是左对齐按钮，如下所示：

我尝试了多种样式和类来使按钮居中。我已经在层次结构的每个级别（在 ion-item、grid、row、col、label、button、button 级别）尝试了它们，但我一直得到相同的结果。

这是项目的结构。在本次迭代中，您可以看到我试图在行级别使用text-center 属性：

<ion-item>
  <ion-grid>
    <ion-row text-center>
      <ion-col size="6">
        <ion-label>
          <ion-buttons>
            <ion-button> Problem? </ion-button>
          </ion-buttons>
        </ion-label>
      </ion-col>
      <ion-col size="6">
        <ion-label>
          <ion-buttons>
            <ion-button>More</ion-button>
          </ion-buttons>
        </ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

我已阅读有关 scss 样式的 ionic 文档，但他们没有讨论嵌套项目，例如 ion-item 内部的网格。

我怀疑某些元素的样式会压倒我在此处将按钮居中的尝试，我需要了解样式层次结构的基本原则。有没有地方可以学这个？

我已包含整个 .scss 文件以供参考，但我怀疑我遗漏了一个原则：

.ios,
.md 
  page-home 
    #container 
      text-align: left;

      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    

    #container strong 
      font-size: 20px;
      line-height: 26px;
    

    #container p 
      font-size: 16px;
      line-height: 22px;

      color: #8c8c8c;

      margin: 0;
    

    #container a 
      text-decoration: none;
    

    ion-item 
      padding-top: 0.5rem;
    

    .center-button 
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-item: center;
    

    ion-col 
      text-align: left;
    

    ion-label 
      font-weight: bold;
    

    ion-title 
      font-size: 1.5rem;
    

    .item-name 
      font-size: 2rem;
    
  

谢谢！

【问题讨论】：

你使用的离子版本是什么？

当前版本 = 6.17.0

在离子按钮上尝试expand=block。所以<ion-button expand="block"> Problem? </ion-button>。您也可以尝试从<ion-buttons> 标签中删除<ion-button>。在离子按钮中，文本默认居中。展开块将按钮展开到所有可用空间。所以你可以去掉 Ion-label 和 ion-buttons 标签。试着把它直接放在 ion-col 标签下。

【参考方案1】：

您可以通过将这两个 css 属性添加到 ion-label 来实现此目的

display: flex;
justify-content: center;

【讨论】：

嗯。我认为这也应该有效，但没有骰子。我认为必须有一些其他样式覆盖页面的 scss 页面。

如果是这种情况，请尝试将 !important 放在这些上面。

这也是一个很棒的主意，但我还是被卡住了。我会在周末再戳它一些，并在找到解决方案后报告解决方案。我怀疑有冲突的规范。

【参考方案2】：

这不是解决问题的正确方法，但这是我最终所做的：我只是将样式信息内联在 html 中。这是一个例子：

      <ion-row style="width: 100%; text-align: center">
        <ion-item style="width: 100%; text-align: center">
          <ion-col size="4" style="align-content: center">
            <ion-buttons style="width: 100%; text-align: center">
              <ion-button
                style="width: 100%; text-align: center"
                (click)="onClickProblem('button', item.name)"
              >
                Problem?
              </ion-button>
            </ion-buttons>
          </ion-col>
          <ion-col
            size="4"
            style="width: 100%; text-align: center"
            *ngIf="item.notes"
          >
            <ion-buttons style="width: 100%; text-align: center">
              <ion-button
                style="width: 100%; text-align: center"
                (click)="onClickMore('button', item.notes)"
                >More</ion-button
              >
            </ion-buttons>
          </ion-col>

您可以在整个过程中看到"width: 100%; text-align: center"。这不是最可维护的解决方案，但它让我摆脱了没有进步的炼狱。