无法在锚定内设置索环图标样式

如何解决无法在锚定内设置索环图标样式

我是grommet的新成员，拥有样式化的组件。 我已经检查了所有文档，却找不到解决方案。

问题

我有一个带有图标和标签的锚。 问题是，当我将鼠标悬停或处于活动状态时，无法将其定位为样式图标。 文字/标签虽然会更改样式。我该如何实现/解决此问题？

我也尝试过使用样式化的组件，并将图标和文本放入索环框中，但是没有用。

请帮助！

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;

解决方法

对于所需样式的粒度，我认为您可以直接使用Button组件而不是Anchor，但是Button的使用更符合您所描述的Sidebar交互元素的可访问性标准（WCAG）。以上。

索环最适合样式化组件，而索环主题化也非常强大，并且知道如何利用其功能可以帮助您减少样式化组件的使用。 最近，索环扩展了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中获得相同的功能，但是这种方法更加简洁。