Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
`
@MatteoGioioso

This comment has been minimized.

Copy link

commented Sep 28, 2018

So, if I have understood correctly, you are overriding the Ant class directly in the styled component?

@ositowang

This comment has been minimized.

Copy link

commented Oct 11, 2018

I think so and it's the same as overwritting with css but in a styled-component way

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.