I am exploring the use of Style JSX within a Next JS application to customize AntD components, with a focus on customizing the appearance of the sidebar (specifically using Style JSX to modify AntD's Sider component). Below is a snippet of the code I am working with:
<>
<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
</>
One customization I envision is changing the background color to something different. My attempts so far include:
- Trying to target the element by its id like this:
<style jsx>{`
#left-sidebar { background-color: #fff }
`}</style>
Another attempt involved referencing the resulting HTML element, specifically an aside tag (including the corresponding classname ant-layout-sider).
I also experimented with using css.resolve as per the Next JS documentation for external components, but without success.
Unfortunately, none of these methods seem to apply the styles in the browser when inspected closely. While other approaches like global CSS files and CSS-modules work, the usage of style jsx in this scenario seems problematic despite following the guidelines provided by NextJs.
My assumption is that the framework may be stripping away the CSS styles before rendering the elements. So, my question remains - is it simply not feasible to achieve this, or is there a crucial step that I am overlooking? The example above is borrowed from Antd Layouts Sider.