无法在 Anchor 内设置 Grommet 图标

Question

我是使用样式组件的 Grommet 新手。 我已经检查了所有文档，但找不到解决方案。

问题

我有一个带有图标和标签的锚。 问题是当我悬停或处于活动状态时，我无法定位样式图标。 文本/标签虽然改变了样式。我该如何实现/解决这个问题？

我也尝试过使用样式化组件并将图标和文本放入 Grommet Box 中，但没有奏效。

请帮忙！

import React from "react";
import { Anchor, Box, Text } from "grommet";
import styled from "styled-components";
import { Currency as PayoutIcon, Menu as MenuIcon } from "grommet-icons";

const StyledAnchor = styled(Anchor)`
  display: flex;
  height: 56px;
  color: #808191;
  padding: px 20px;
  border-radius: 12px;
  background: transparent;
  width: max-content;

  text-decoration: none;
  font-family: Inter;
  color: #808191;
  padding: 0px 20px;
  background: transparent;
  transition: all 0.25s ease 0s;
  text-decoration: none;
  border: none;

  &:visited {
    text-decoration: none;
    border: none;
  }

  &:hover {
    color: #6c5dd3;
    text-decoration: none;
  }
  &:active {
    color: #fff;
    background: #6c5dd3;
    text-decoration: none;
    border: none;
  }

  &:focus {
    color: #fff;
    background: #6c5dd3;
    textdecoration: none;
    border: none;
  }
`;
const SidebarItem = () => {
  return (
    // <Box color="#808191" hoverIndicator="true">
    <StyledAnchor
      color="#808191"
      label="Payouts"
      onClick={() => {}}
      href="#"
      icon={<PayoutIcon />}
    />
    // </Box>
  );
};

export default SidebarItem;

Answer 1

对于您正在寻找的样式的粒度，我认为您可以直接使用 Button 组件而不是 Anchor，但是，Button 的使用更符合您所描述的侧边栏交互元素的可访问性标准 (WCAG)以上。

Grommet 与 styled-components 配合使用效果最好，但grommet 主题化也非常强大，知道如何利用它的功能将帮助您减少 styled-components 的使用。 最近，grommet 扩展了 Button 主题（种类/默认按钮），这应该可以为您解决问题，而且不需要样式组件，这里是一个示例：

import React, { useState } from "react";
import { render } from "react-dom";
import { Box, Grommet, Button } from "grommet";
import { Currency as PayoutIcon } from "grommet-icons";

const theme = {
  global: {
    colors: {
      myColor: "#808191",
      "background-contrast": {
        dark: "#FFFFFF14",
        light: "#0000000A"
      },
      "active-background": "background-contrast",
      "active-text": "red",
      icon: "text",
      // focus color is an important indication for keyboard navigation accessibility, 
      // it will be an ill advice to set it to undefined and remove focus 
      focus: "teal",
      text: {
        dark: "#C0CADC",
        light: "#444444"
      }
    }
  },
  button: {
    default: {
      color: "#808191",
      border: undefined,
      font: {
        weight: 700
      },
      padding: {
        horizontal: "12px",
        vertical: "6px"
      }
    },
    hover: {
      default: {
        background: {
          color: "background-contrast"
        },
        color: "brand"
      },
      secondary: {
        border: {
          width: "3px"
        },
        padding: {
          horizontal: "9px",
          vertical: "3px"
        }
      }
    },
    active: {
      background: {
        color: "aliceblue"
      },
      color: "teal",
      secondary: {
        border: {
          color: "transparent"
        }
      }
    }
  }
};

const SidebarItem = () => {
  const [active, setActive] = useState();
  return (
    <Button
      active={active}
      label="Payouts"
      icon={<PayoutIcon />}
      onClick={() => {
        setActive(!active);
      }}
      href="#"
    />
  );
};

export const App = () => {
  return (
    <Grommet theme={theme}>
      <Box pad="small" align="start">
        <SidebarItem />
      </Box>
    </Grommet>
  );
};

render(<App />, document.getElementById("root"));

这是一个codesandbox 用于实时运行它。

按钮具有活动/悬停/禁用等粒度，您基本上可以使用主题anchor.extend 在 Anchor 中获得相同的功能，但这种方式更简洁。