无法在 Anchor 内设计 Grommet 图标 [英] Can't Style Grommet icon inside Anchor
问题描述
我刚接触带有样式组件的 Grommet.我已经检查了所有文档，但找不到解决方案.
问题
我有一个带有图标和标签的锚点.问题是当我将鼠标悬停或处于活动状态时，我无法针对样式设置图标.文本/标签虽然改变了样式.我该如何实现/解决这个问题?
我也尝试过使用样式化组件并将图标和文本放入 Grommet Box 中，但没有奏效.
请帮忙！
从反应"导入反应；import { Anchor, Box, Text } from "grommet";从样式组件"导入样式；import { Currency as PayoutIcon, Menu as MenuIcon } from "grommet-icons";const StyledAnchor = styled(Anchor)`显示:弹性；高度:56px；颜色:#808191；填充:像素 20 像素；边框半径:12px；背景:透明；宽度:最大内容；文字装饰:无；字体系列:国际；颜色:#808191；填充:0px 20px；背景:透明；过渡:所有 0.25 秒缓和 0 秒；文字装饰:无；边界:无；&:访问过{文字装饰:无；边界:无；}&:悬停{颜色:#6c5dd3；文字装饰:无；}&:active {颜色:#fff;背景:#6c5dd3；文字装饰:无；边界:无；}&:焦点{颜色:#fff;背景:#6c5dd3；文字装饰:无；边界:无；}`;const SidebarItem = () =>{返回 (//<框颜色=#808191";悬停指示器=真"><样式锚颜色=#808191"标签=支付"；onClick={() =>{}}href="#";icon={<PayoutIcon/>}/>//</盒子>);};导出默认 SidebarItem；对于你要找的样式的粒度，我觉得你可以直接用Button组件代替Anchor，不过Button的用法更符合您在上面描述的侧边栏交互元素的可访问性标准 (WCAG).
Grommet 与样式化组件一起使用效果最佳，但 grommet 主题化也非常强大，了解如何利用其功能将帮助您减少使用样式化组件.最近，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 主题 = {全球的: {颜色: {我的颜色:#808191"，背景对比":{黑暗:#FFFFFF14"，光:#0000000A"},活动背景":背景对比"，活动文本":红色"，图标:文本"，//焦点颜色是键盘导航可访问性的重要指示，//将其设置为未定义并移除焦点将是一个错误的建议焦点:青色"，文本: {黑暗:#C0CADC"，光:#444444"}}},按钮: {默认: {颜色:#808191"，边界:未定义，字体:{重量:700},填充:{水平:12px"，垂直:6px"}},悬停:{默认: {背景: {颜色:背景对比度"},颜色:品牌"},次要:{边界: {宽度:3px"},填充:{水平:9px"，垂直:3px"}}},积极的: {背景: {颜色:aliceblue"},颜色:青色"，次要:{边界: {颜色:透明"}}}}};const SidebarItem = () =>{const [active, setActive] = useState();返回 (<按钮活跃={活跃}标签=支付"；icon={<PayoutIcon/>}onClick={() =>{setActive(!active);}}href="#";/>);};export const App = () =>{返回 (<Grommet 主题={主题}><盒子垫=小"对齐=开始"><SidebarItem/></盒子></索环>);};渲染(这是一个 codesandbox 用于实时运行.
按钮具有活动/悬停/禁用等粒度，您基本上可以使用主题 anchor.extend 在 Anchor 中获得相同的功能，但这种方式更简洁.
I'm new to Grommet with styled components. I Have already checked all the docs and can't find the solution.
PROBLEM
I have an Anchor with an icon and a label. Problem is I cannot target the icon for styling when i hover or it is active. Text / Label changes the styling though. How can i achieve/fix this?
I've also tried using styled components and putting an Icon and a Text inside a Grommet Box, but didn't work.
Please help!
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;
For the granularity of styles you are looking for, I think you can directly use the Button component instead of Anchor, nevertheless, the usage of Button is more compliant with accessibility standards (WCAG) for the Sidebar interactive elements that you are describing above.
Grommet works best with styled-components, yet grommet theme-ing is also very powerful, and knowing how to leverage its capabilities will help you use styled-components much less. Recently, grommet extended the Button theme (kind/default button), and that should do the trick for you with no sweat and no need for styled-components, here is an example:
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"));
Here is a codesandbox for running it live.
The Button has the granularity for active/hover/disabled and more, you can basically gain the same functionality in Anchor using the theme anchor.extend but this way is a much cleaner approach.
这篇关于无法在 Anchor 内设计 Grommet 图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
