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

Question

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

问题

我有一个带有图标和标签的锚点。问题是当我悬停或它处于活动状态时，我无法将图标作为样式的目标。 Text / Label 改变了样式。我如何 achieve/fix 这个？

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

请帮忙！

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 的使用更符合您所需要的 Sidebar 交互元素的可访问性标准 (WCAG)上面有描述。

Grommet 最适合与 styled-components 搭配使用，但 grommet theme-ing 也非常强大，了解如何利用其功能将帮助您减少 styled-components 的使用。最近，grommet 扩展了 Button 主题（kind/default 按钮），这应该可以轻松完成，不需要 styled-components，这里有一个例子：

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。

Button 具有 active/hover/disabled 甚至更多的粒度，您基本上可以使用主题 anchor.extend 在 Anchor 中获得相同的功能，但这种方法更简洁。

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

Can't Style Grommet icon inside Anchor

javascript

css

reactjs

grommet

styled-components