Style JSX in NextJS project does not work with external (antd) components

I'm looking to use Style JSX in a Next JS app for customizing AntD components. Specifically, I want to customize the sidebar appearance (by customizing AntD's Sider component with Style JSX). I have the following code:

   <>
        <Sider collapsible collapsed={collapsed}
        onCollapse={onCollapse} id='left-sidebar'
        >
            <div id='components-layout-demo-side'/>
            <Menu theme="light" defaultSelectedKeys={['1']} mode="inline">
                <Menu.Item key="1" icon={<PieChartOutlined />} >Option 1</Menu.Item>
                    
                <Menu.Item key="2" icon={<DesktopOutlined />} >Option 2</Menu.Item>
                        
            </Menu>
            // style jsx here
        </Sider>
        // or style jsx here
   </>

Among many customizations, imagine I want to change the background color to something else. I have tried the following:

1. Try referencing by id like this:

    <style jsx>{`
        #left-sidebar { background-color: #fff }
    `}</style>

2. Tried the above by referencing the resulting html element, i.e. aside (along with the resulting classname ant-layout-sider).

3. Used css.resolve as mentioned in the docs to no avail as suggested by Next JS docs (regarding external components).

No matter what, the browser does not get the styles at all (checked thoroughly through inspect element).

I tried experimenting in other ways as well, but with style jsx it does not seem to work unless I make the style global. The styles are applied when I apply this to a global.css file or when I use css-modules for components. However, I can not get it to work even after following NextJs docs.

My guess is the framework strips the css styles even before the actual elements are generated. My question is, is this entirely not possible, or am I missing something? The above example is taken from Antd Layouts Sider.