Skip to content

Instantly share code, notes, and snippets.

@samuelcastro
Forked from newswim/antd_sc_example.js
Created October 5, 2018 21:45
Show Gist options
  • Save samuelcastro/0ff7db4fd54ce2b80cd1c34a85b40c08 to your computer and use it in GitHub Desktop.
Save samuelcastro/0ff7db4fd54ce2b80cd1c34a85b40c08 to your computer and use it in GitHub Desktop.
Wrapping Ant Design components with Styled Components
import { Link } from 'react-router-dom'
import { Badge, Col, Menu } from 'antd'
const StyledBadge = styled(Badge)`
.ant-badge-count {
background-color: #7ECBBF;
color: white;
box-shadow: 0 0 0 1px #d9d9d9 inset;
}
`
const StyledLink = styled(Link)`
border: 1px solid #fff;
margin-top: 5px;
transition: background-color .3s ease;
border-radius: 2px;
&:hover {
background-color: #78bdb8;
}
`
const MobileCol = styled(Col)`
.ant-popover-inner-content {
padding: 0;
}
`
const StyledMenu = styled(Menu)`
background: transparent;
border-bottom: none;
display: flex;
justify-content: flex-end;
.ant-menu-submenu-horizontal > .ant-menu {
margin-top: -2px;
}
.ant-menu-item:hover {
border-bottom: 2px solid #B2D235;
}
.about-dropdown {
border-bottom: none;
&:hover {
border-bottom: none;
}
li:hover {
border-bottom: none;
}
}
.ant-menu-item-group-list {
padding: 0 0 10px 0;
}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment