问题描述
我是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中获得相同的功能,但是这种方法更加简洁。