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

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!

This was extremely useful. Even after eight years.