Reactjs 如何使用样式化组件制作下拉菜单?
如何使用样式化组件重写此下拉菜单Reactjs 如何使用样式化组件制作下拉菜单?,reactjs,typescript,styled-components,Reactjs,Typescript,Styled Components,如何使用样式化组件重写此下拉菜单 .下拉列表{ 位置:相对位置; 显示:内联块; } .下拉内容{ 显示:无; 位置:绝对位置; 背景色:#f9f9f9; 最小宽度:160px; 盒影:0px 8px 16px 0px rgba(0,0,0,0.2); 填充:12px 16px; z指数:1; } .下拉:悬停.下拉内容{ 显示:块; } 悬停式下拉菜单 将鼠标移到下面的文本上以打开下拉内容 老鼠在我身上 你好,世界 资料来源: 到目前为止,我已经尝试过: const NavbarDro
.下拉列表{
位置:相对位置;
显示:内联块;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:#f9f9f9;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
填充:12px 16px;
z指数:1;
}
.下拉:悬停.下拉内容{
显示:块;
}
悬停式下拉菜单
将鼠标移到下面的文本上以打开下拉内容
老鼠在我身上
你好,世界
资料来源:
到目前为止,我已经尝试过:
const NavbarDropdown = styled.div`
position: relative;
display: inline-block;
&:hover {
display: block;
}
`;
const NavbarDropdownContent = styled.div`
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0, 2);
padding: 12px 16px;
z-index: 1;
`;
export const Navbar: React.FC = () => {
return (
<NavbarDropdown>
<span>Menu</span>
<NavbarDropdownContent>
<Link to="/">Dropdown here</Link>
</NavbarDropdownContent>
</NavbarDropdown>
);
};
const NavbarDropdown=styled.div`
位置:相对位置;
显示:内联块;
&:悬停{
显示:块;
}
`;
const NavbarDropdownContent=styled.div`
显示:无;
位置:绝对位置;
背景色:#f9f9f9;
最小宽度:160px;
盒子阴影:0px 8px 16px 0px rgba(0,0,0,0,2);
填充:12px 16px;
z指数:1;
`;
导出常量导航栏:React.FC=()=>{
返回(
菜单
在这里下拉
);
};
它不起作用,我不知道下一步该怎么办。请帮帮我
另外,我使用的是React-v16.8.6、TypeScript-v3.4.5、Styled-components-v4.2.1当鼠标悬停时,您应该设置NavbarDropdownContent的显示属性
const NavbarDropdown = styled.div`
position: relative;
display: inline-block;
&:hover {
display: block;
>div {
display: block;
}
}
`;