【问题标题】：How to change active border colour of grommet v2 FormField?如何更改索环 v2 FormField 的活动边框颜色？
【发布时间】：2019-06-19 11:16:45
【问题描述】：

我正在尝试使用 grommet v2 创建应用主题。我正在使用来自索环组件的 Form 和 FormField 来装箱。当 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
      }
   },
}

我希望将此颜色更改为灰色，但它仍然是默认颜色

【问题讨论】：

标签： reactjs form-fields border-color grommet

【解决方案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 组件上指定焦点颜色。

【讨论】：

【解决方案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;
    }
  `,
},

【讨论】：

【解决方案3】：

以下是关于如何控制主题的焦点颜色的一些想法：

在global.colors 上定义您自己的颜色集，并从该集中选择一种颜色作为焦点颜色：

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

直接在主题上更改焦点颜色对象：

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>

注意：索环颜色也接受深色/浅色对象，read more here。

有关索环焦点行为的实时故事示例go here。

【讨论】：