ExtJS 6.7.0 - SCSS 类未加载

Question

我正在尝试将背景颜色应用到 ExtJS 中的网格中的列，这里是我的代码，我应用了 sencha app watch，所以我加载了所有内容，但我一直没有应用任何栅栏，我是什么注意到了

Ext.define('Ris.academic.student.situation.SituationColumn', {
    extend: 'Ext.grid.column.Column',
    xtype: 'studentsituationcolumn',

    text: 'Situaciones',
    dataIndex: 'situations',
    renderer(situations) {
        let tags = [];
        (situations || []).forEach(situation => {
            tags.push(
                `<div class="student-situation-tag" style="background-color: ${situation.color}">
                    ${situation.text}
                 </div>`
            );
        });
        return tags.join('');
    }
});

这是 SCSS：

.x-grid-cell-inner {
  .student-situation-tag {
    display: flex;
    font-size: smaller;
    font-weight: bold;
    color: #fff;
    padding: 0 3pt;
    border-radius: 3px;
    text-align: center;

    &:not(:first-child) {
      margin-left: 2px;
    }
  }
}

.male-row .x-grid-cell {
  background-color: lightblue; !important;
}

.female-row .x-grid-cell {
  background-color: lightpink; !important;
}

Answer 1

您在没有设置 viewConfig 的情况下附加样式。

我想你有类似getRowClass:

viewConfig: {
        getRowClass: function (record) {
            return record.get('gender') == 'm' ? 'male-row' : 'female-row';
        }
    },

在您的 grid 配置中。

看小提琴上的例子：https://fiddle.sencha.com/#fiddle/35vs

我没有看到任何问题（因为小提琴，我使用 css 而不是 scss）。