在我的Vue應用程序中，我使用aws驗證器來處理登錄/注冊。 我需要定制樣式，但是這有點棘手，因為它的結構是由shadow DOM構成的。

修改變量: 到目前為止，我只設法修改了一些放大變量。

我是這樣做的:

:root {
  --amplify-background-color: transparent;
  --amplify-secondary-color: white;
  --amplify-primary-contrast: white;
  --amplify-primary-color: #E00C1D;
}

旁注。用amplify-sign-in代替:root也可以，但是從邏輯上講，這種樣式只適用于登錄表單，而不適用于注冊表單。 自定義風格定位:root適用于登錄和注冊表單。

自定義輸入字段: 這里是我卡住的地方。 輸入中文本的顏色由- amplify-secondary-color var給出，在我的例子中需要是白色。但是這樣輸入的文本在白色背景上是不可見的。

這是放大登錄的HTML結構。輸入在放大器輸入內部。

這是。輸入類。正如你所看到的，顏色是由- color變量控制的

這就是- color var所指的:

我的嘗試: 我已經嘗試了幾種方法，但都不起作用。 我試著瞄準。輸入類，輸入，放大輸入，或者改變顏色變量。

以下是一些嘗試:

:host {
  --color: red !important;
}

:host(.input) {
  color: red !important;
  --color: red !important;
}

amplify-input {
  --color: red !important;

  & .input {
    color:red !important;
    --color: red !important;
  }
}

文檔: 這是關于css定制的文件。不幸的是，文檔非常糟糕

測試: 使用Vue設置工作示例的最快方法是從amplify-js-samples包中設置這個示例:https://github . com/AWS-amplify/amplify-js-samples/tree/main/samples/Vue/auth/authenticator

問題是: 如何修改aws驗證器的輸入文本？

更新到Vue的Amplify UI的最新版本可能是有意義的。

有更新的樣式文檔 https://ui . docs . amplify . AWS/vue/connected-components/authenticator/customization # CSS-style

它還鏈接到另一個顯示所有CSS變量的頁面 https://ui.docs.amplify.aws/vue/theming/css-variables

更新后的版本具有更精細的CSS類，例如:

-放大顏色字體原色 -放大-顏色-字體-交互 -放大顏色字體活動 放大-顏色-字體-焦點 嘗試以下scss，

amplify-sign-in /deep/ {
    amplify-input {
        > input.input {
            color : red !important;
        }
    }
}

既然你用的是SCSS，你可以這樣做

::v-deep amplify-input input[type='email'] { // can of course be more specific here
  color: red !important;
}

的！重要在這里是沒問題的，因為它是你要覆蓋的第三方。 您也可以保留您的& ltstyle lang = & quotscss & quotscoped & gt這邊走。

正如vue loader官方文檔中所解釋的:https://vue-loader . vue js . org/guide/scoped-CSS . html # deep-selectors

要了解更多細節，這篇文章總是一個極好的參考:https://stackoverflow.com/a/55368933/8816585