I am using ant design and module css in a react project. For example, I have a code like below.
<Tabs
className={Style.PortfolioTabPanel}
animated={{ inkBar: false, tabPane: true }}
defaultActiveKey="1"
centered={true}
size={"large"}
tabBarGutter={50}
tabBarStyle={{
color: "white",
}}
>
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
The problem is exactly here, I can't see .ant-tabs-ink-bar element for example, ant design creates it automatically inside Tabs component.
When we wrote normal css, we could do this like this:
<Tabs
className="PortfolioTabPanel"
animated={{ inkBar: false, tabPane: true }}
defaultActiveKey="1"
centered={true}
size={"large"}
tabBarGutter={50}
tabBarStyle={{
color: "white",
}}
>
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
But now, when I type
.PortfolioTabPanel .ant-tabs-ink-bar {
background-color: red !important;
}
in module.css file, the browser cannot see the selector because module.css has changed PortfolioTabPanel class name to PortfolioTabPanel_dynamical_id.
Has anyone encountered such a problem and found a solution?
If you want to rewrite global styles using module.css file, you can do it as described in the documentation
:global(.PortfolioTabPanel) .ant-tabs-ink-bar {
background-color: red !important;
}
related question Using css modules how do I define a global class