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

Overriding antd component using styled-component is working fine.
But it is not working on Modal

const StyledModal = styled(Modal)`
   .ant-modal-content {
        border-radius: 1rem;
    }
`

But there is not appearing styled-component created class.

Double check whether you're targeting the right element.

The problem I'm facing with this approach is that after wrapping the Ant Design components with styled I'm missing several methods from the original Component. For example, I missed Modal.info, Modal.useModal, etc.

Hey did anyone find any way to encounter this issue ?

The problem I'm facing with this approach is that after wrapping the Ant Design components with styled I'm missing several methods from the original Component. For example, I missed Modal.info, Modal.useModal, etc.

Hey did anyone find any way to encounter this issue ?

You can use hoist-non-react-statics

hoistNonReactStatics(MyModal, AntModal);

This is working great for me. Just importing antd and not loading its LESS stylesheets, then wrapping the imported component in styled(), looks like the way to go for us.

@jorisw Is this solution still working for you? I have installed "antd": "^4.9.4", which is overriding all custom styles.

const StyledTitle = styled(Search)`
	.ant-input-group-wrapper {
		width: 60%;
	}
`;

Also, the className is not being recognized

Just for contribution, I ran into some troubles when trying to override a component's base class. If you want to override a base class property just wrap the styles in triple & just like this:
const NewButton = styled(Button)' &&& { background: red; } ';

If you don't, the changes you want to do will just be ignored

This worked for me, I'm a little unfamiliar with using that type of selector. Why does this work? is this essentially just the same thing as directly using the class selector but in this case you don't need the actual class name?

Here is a starter kit for NextJS 🔗 Ant Design 🔗 Styled-Component ⚡️ + Typescript

Overriding antd component using styled-component is working fine.
But it is not working on Modal

const StyledModal = styled(Modal)`
   .ant-modal-content {
        border-radius: 1rem;
    }
`

But there is not appearing styled-component created class.

This won't work as modal is usually at root level. Just go to developer tools and try to understand where this modal is in the DOM. If it is at root then you might have to add styles in global styles probably.

Thanks.

…

On Sun, Sep 26, 2021 at 3:38 PM Indrajeet Nikam ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Overriding *antd* component using styled-component is working fine. *But it is not working on Modal* const StyledModal = styled(Modal)` .ant-modal-content { border-radius: 1rem; } ` But there is not appearing styled-component created class. This won't work as modal is usually at root level. Just go to developer tools and try to understand where this modal is in the DOM. If it is at root then you might have to add styles in global styles probably. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/fa916c66477ddd5952f7d6548e6a0605#gistcomment-3905463>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQX76WFJWW7GDOPTJ762R73UD3WJXANCNFSM4H6WYPJA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

Amazing!