如何在 Ext JS 7 中使用自定義 sass

Question

我一直在嘗試更改我在 Ext JS v7.0.0.40 上創建的表單中的按鈕顏色

Login.js 位置是 app\\modern\\src\\view\\main\\Login.js

  extend: "Ext.form.Panel",
  xtype: "form-login",
  title: "Login Form",

  bodyPadding: 20,
  width: 320,
  autoSize: true,

  items: [
    {
      xtype: "textfield",
      allowBlank: false,
      required: true,
      label: "User ID",
      name: "user",
      placeholder: "user id"
    },
    {
      xtype: "passwordfield",
      allowBlank: false,
      required: true,
      label: "Password",
      name: "pass",
      placeholder: "password"
    },
    {
      xtype: "checkbox",
      boxLabel: "Remember me",
      name: "remember"
    }
  ],

  buttons: [
    {
      text: "Login",
      handler: "onLogin"
    }
  ]
});

Login.sass 位置是 app\\modern\\sass\\var\\view\\main\\Login.sass

.form-login {
  .button {
    background-color: #ff3737;
  }
}

出於某種原因，我無法更改按鈕的顏色，我相信這有一個非常簡單的修復方法。

提前致謝！

Answer 1

歡迎使用堆棧溢出：

您沒有為表單設置cls （元素的自定義類）。

背景顏色的按鈕樣式是在子元素中完成的：

.scss 文件：

.form-login {
  .x-button .x-inner-el {
    background-color: #ff3737;
  }
}

https://fiddle.sencha.com/#view/editor&fiddle/325q

更多信息：

• 要了解自己，您可以檢查按鈕並看到，
  • 按鈕 cls 是x-button
  • 將背景顏色添加到 x 按鈕將無濟於事
  • 在 x-button 內進一步向下是 x-button-el 並在那里添加背景顏色將實際改變顏色。
• scss 文件應該與表單登錄文件並行，但您不必這樣做。
• 如果你打算使用這種類型的顏色
  • 更頻繁地：使用cls並創建具有該樣式的自定義組件
  • 始終：查看文檔以更改主題中的按鈕背景顏色