javascript - 无法在 Anchor 内设置 Grommet 图标
问题描述
我是带有样式组件的 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 的使用更符合您上面描述的侧边栏交互元素的可访问性标准 (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"));
这是一个用于实时运行的代码框。
Button 具有活动/悬停/禁用等粒度,您基本上可以使用主题在 Anchor 中获得相同的功能,anchor.extend
但这种方式更简洁。
推荐阅读
- linux - 插入设备时使用 android reverse 通过 USB 启动 ssh
- python - 如何对熊猫组中的每组数据应用函数
- excel - 我无法刷新导入到 Excel 电子表格中的 SharePoint 列表数据,该电子表格已上传到同一网站,使用 Excel Web Access 显示
- javascript - Vue3:v-model的问题,它不更新组件
- java - 在 Spring webflux 中抛出异常 vs Mono.error()
- android - Unity,JSON 文件 - Android 问题,找不到我的 JSON 文件
- visual-studio-code - VisualStudioCode 在调试时打印到终端时引发错误
- blockchain - 坚固性 v0.6.0。后备功能。他们需要什么?
- angular - httpClient 上的 Angular 循环
- yocto - gprolog 配方的 Autoreconf 失败