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

@sorsaffari

This comment has been minimized.

Copy link

commented Jul 7, 2019

Thanks for sharing this @newswim.

I'm thinking of adopting this to customise the style of ant design components in a controlled manner. I wonder if you have any word of advice for taking on this approach. Have you encountered any challenges or limitations since you started using this approach?

I appreciate, in advance, anything you could tell me :)

@newswim

This comment has been minimized.

Copy link
Owner Author

commented Jul 9, 2019

@sorsaffari, this might not still be the case, but when I was using ant-design approximately a year and a half ago, I would've recommended using react-app-rewired and relied more on their theming capabilities. AD uses a lot of less/css variables, which can all be overridden. Potentially, that could mean a smaller bundle size.

When you need to dig down into a particular component, and if you're using style-component for other things, I would still recommend this method (although there might be better options available by now!)

@sorsaffari

This comment has been minimized.

Copy link

commented Jul 9, 2019

Thank you @newswim for your answer. It's very helpful!

I think the hybrid of Antd's theming capabilities and (re)styling individual components with this approach can produce an Antd library that has a completely customised UI.

I just hope there won't be any big surprises. Thanks again for sharing :)

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.