Reactjs 如何更改索环v2 FormField的活动边框颜色？

我正在尝试用grommet v2创建应用程序主题。我正在使用从索环组件到板条箱from的Form和FormField。当FormField处于活动状态时，底部边框将颜色更改为默认值

重音-1

，我无法更改此边框颜色

我有一个theme.js文件，我把它放在组件的theme属性中。与主题相关的一切都很好（按钮颜色等）。我曾尝试更改accent-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
      }
   },
}

---

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

我也有此问题。我可以通过添加一个名为“聚焦”（focus）的全局颜色来解决这个问题。看起来您无法自定义FormField组件的颜色

这项工作：

const主题={
全球：{
颜色：{
品牌：“#0CA7D3”，
灰色：“#DDDBE0”，
grey2:“#9a”，
焦点：'#0CA7D3'//添加了焦点颜色
}
},
formField：{
标签：{
尺寸：“小”
}
}
}

请注意，这可能会改变其他组件的焦点颜色，因为这是一种全局颜色

这不起作用：

const主题={
全球：{
颜色：{
品牌：“#0CA7D3”，
灰色：“#DDDBE0”，
grey2:“#9a”
}
},
formField：{
标签：{
尺寸：“小”
},
颜色：{
焦点：'#0CA7D3'//尝试添加一个包含焦点属性的颜色属性
}
}
}

源代码 查看FormField组件的源代码， 看起来他们是这样定义边框颜色的：

让边框着色；
if（焦点和规格化错误）{
borderColor=‘焦点’；
}else if（规格化错误）{
borderColor=（border&&border.error.color）| |‘状态关键’；
}否则{
borderColor=（border&&border.color）| |‘border’；
}

以下是Github上组件代码的链接：

请注意，在normalizedError案例中，它们如何使用Grommet中主题对象的属性

border.error.color

。 在焦点情况下，它们将borderColor设置为

focus

---

组件似乎不支持从主题对象在FormField组件上指定焦点颜色。

我也有这个问题。我可以通过添加一个名为“聚焦”（focus）的全局颜色来解决这个问题。看起来您无法自定义FormField组件的颜色

这项工作：

const主题={
全球：{
颜色：{
品牌：“#0CA7D3”，
灰色：“#DDDBE0”，
grey2:“#9a”，
焦点：'#0CA7D3'//添加了焦点颜色
}
},
formField：{
标签：{
尺寸：“小”
}
}
}

请注意，这可能会改变其他组件的焦点颜色，因为这是一种全局颜色

这不起作用：

const主题={
全球：{
颜色：{
品牌：“#0CA7D3”，
灰色：“#DDDBE0”，
grey2:“#9a”
}
},
formField：{
标签：{
尺寸：“小”
},
颜色：{
焦点：'#0CA7D3'//尝试添加一个包含焦点属性的颜色属性
}
}
}

源代码 查看FormField组件的源代码， 看起来他们是这样定义边框颜色的：

让边框着色；
if（焦点和规格化错误）{
borderColor=‘焦点’；
}else if（规格化错误）{
borderColor=（border&&border.error.color）| |‘状态关键’；
}否则{
borderColor=（border&&border.color）| |‘border’；
}

以下是Github上组件代码的链接：

请注意，在normalizedError案例中，它们如何使用Grommet中主题对象的属性

border.error.color

。 在焦点情况下，它们将borderColor设置为

focus

---

组件似乎不支持从主题对象在FormField组件上指定焦点颜色。

我使用了

样式化组件
'
扩展
如下：

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;
    }
  `,
},  

我使用了
样式化组件
”
扩展
如下：

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;
    }
  `,
},  

以下是关于如何从主题控制焦点颜色的两个想法：

在
global.colors
上定义自己的颜色集，并从该颜色集中选择一种颜色作为焦点颜色：
直接在主题上更改焦点颜色对象：
在customTheme中使用以下标记，您应该会看到焦点颜色相应地发生变化：

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



有关索环聚焦行为的现场故事示例。
以下是关于如何从主题控制聚焦颜色的两个想法：

在
global.colors
上定义自己的颜色集，并从该颜色集中选择一种颜色作为焦点颜色：
直接在主题上更改焦点颜色对象：
在customTheme中使用以下标记，您应该会看到焦点颜色相应地发生变化：

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



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