无法在锚点内设置Grommet图标的样式

Question

我刚接触带有样式组件的Grommet。我已经检查了所有的文档，但找不到解决方案。

问题

我有一个带图标和标签的锚。问题是，当我悬停或图标处于活动状态时，我无法确定图标的样式。Text / Label改变了样式。如何实现/修复此问题？

我还尝试使用样式化组件，并将图标和文本放入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与样式组件一起工作得最好，但是grommet主题也非常强大，知道如何利用它的功能将帮助您更少地使用样式组件。最近，grommet扩展了Button主题(kind/default按钮)，这应该会让你毫不费力，也不需要样式化组件，下面是一个例子：

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中获得相同的功能，但这种方法更简洁。