0

我正在尝试使用 grommet v2 创建应用程序主题。我正在使用来自索环组件的 Form 和 FormField 来装箱。当 FormField 处于活动状态时，底部边框将颜色更改为默认值accent-1，我无法更改此边框颜色。

我有 theme.js 文件，我将其放入组件中的主题属性。与主题相关的所有内容都运行良好（按钮颜色等）。我试图更改强调 1 的颜色，但缺乏关于此的文档。

在主题.js

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

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

4

3 回答 3

2

我也有这个问题。我能够通过添加一个名为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 组件上指定焦点颜色。

于 2019-08-02T05:31:38.160 回答
0

我像这样使用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;
    }
  `,
},
于 2019-10-21T13:52:28.547 回答
0

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

  1. 定义您自己的颜色集global.colors并从该集中选择一种颜色作为焦点颜色：
const customTheme = {
  global: {
    colors: {
      deepBlue: "#003366",
      focus: "deepBlue",
    }
  }
};
  1. 直接在主题上更改焦点颜色对象：
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>

注意：索环颜色也接受深色/浅色物体，请在此处阅读更多信息。

有关索环焦点行为的现场故事示例，请访问此处。

于 2020-07-07T21:41:06.633 回答