如何更改grommet v2 FormField的活動邊框顏色？

Question

我正在嘗試使用 grommet v2 創建應用程序主題。 我正在使用 grommet 組件中的 Form 和 FormField 來打包 froms。 當 FormField 處於活動狀態時，底部邊框將顏色更改為默認accent-1 ，我無法更改此邊框顏色。

我有 theme.js 文件，我將其放入組件中的主題屬性。 與主題相關的所有內容都運行良好（按鈕顏色等）我試圖更改重音 1 的顏色，但缺少關於此的文檔。

在 theme.js

export const theme = {
   global: {
      colors: {
         brand: colors.primary,
         text: colors.white
      },
      focus: {
         border: {
            color: colors.primary
         },
         accent: {
            1: "#EEEEEE"
         },
         borderBottom: colors.primary
      }
   },
}

我希望將此顏色更改為灰色，但它仍然是默認顏色

Answer 1

我也有這個問題。 我能夠通過添加一個名為focus的全局顏色來解決它。 您似乎無法自定義 FormField 組件的顏色。

這有效：

const theme = {
  global: {
    colors: {
      brand: '#0CA7D3',
      grey: '#DDDBE0',
      grey2: '#9A9A9A',
      focus: '#0CA7D3' // added focus color
    }
  },
  formField: {
    label: {
      size: 'small'
    }
  }
}

請注意，這可能會更改其他組件的焦點顏色，因為這是全局顏色。

這不起作用：

const theme = {
  global: {
    colors: {
      brand: '#0CA7D3',
      grey: '#DDDBE0',
      grey2: '#9A9A9A'
    }
  },
  formField: {
    label: {
      size: 'small'
    },
    colors: {
      focus: '#0CA7D3' // tried adding a colors property with a focus property inside of it
    }
  }
}

源代碼

查看 FormField 組件的源代碼，看起來他們像這樣定義了 borderColor：

let borderColor;
if (focus && !normalizedError) {
  borderColor = 'focus';
} else if (normalizedError) {
  borderColor = (border && border.error.color) || 'status-critical';
} else {
  borderColor = (border && border.color) || 'border';
}

這是 Github 上組件代碼的鏈接： FormField.js

注意在 normalizedError 情況下他們如何使用border.error.color ，它是 Grommet 中主題對象的屬性。 在焦點案例中，他們將 borderColor 設置為focus 。

該組件似乎不支持在主題對象的 FormField 組件上指定焦點顏色。

Answer 2

我使用styled-components ' extend像這樣：

textInput: {
  extend: `
    background: ${ '#333333' }; // dark-1
    margin: 2px 0px;

    &:hover {
      background: ${ '#555555' }; // dark-2
    }

    &:focus {
      background: ${ '#555555' }; // dark-2
      color: ${ '#ffffff' };
    }

    &::placeholder {
      color: dark-5;
      font-style: italic;
      font-weight: 200;
    }
  `,
},  

Answer 3

以下是關於如何從主題中控制焦點顏色的一些想法：

1. 在global.colors上定義您自己的顏色集，並從該集合中選擇一種顏色作為焦點顏色：

const customTheme = {
  global: {
    colors: {
      deepBlue: "#003366",
      focus: "deepBlue",
    }
  }
};

2. 直接在主題上更改焦點顏色對象：

const customTheme = {
  global: {
    colors: {
      focus: "#000000"
    }
  }
};

將以下標記與您的 customTheme 一起使用，您應該會看到焦點顏色相應地發生變化：

    <Grommet theme={customTheme}>
      <Box pad="small" gap="medium" width="medium">
        <TextInput placeholder="hi" />
        <Anchor href="">Anchor</Anchor>
        <Button label="Button" onClick={() => {}} />
      </Box>
    </Grommet>

注意：索環顏色也接受深色/淺色物體，請在此處閱讀更多內容。

有關索環焦點行為的現場故事示例，請訪問此處。