Wrapping Ant Design components with Styled Components

antd_sc_example.js

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;
    }
`