How can we effectively combine local and global selectors when referencing them using JS CSS-modules?

I need assistance with a specific task in my React project, where I am utilizing the Ant Design framework along with css-modules bundling.

My goal is to target certain Ant classes based on the parent div's generated class using css-modules.

The current code I have is not achieving the desired result:

.container
    flex-grow: 1 !important

.container
    \:global &.ant-layout-sider-collapsed
        .anticon
            font-size: 16px
            margin-left: 8px
        .nav-text
            display: none
        .ant-menu-submenu-vertical > .ant-menu-submenu-title:after
            display: none

This results in:

.Navigation__container___1S9AX {
  flex-grow: 1 !important; }

.container.ant-layout-sider-collapsed .anticon {
  font-size: 16px;
  margin-left: 8px; }

.container.ant-layout-sider-collapsed .nav-text {
  display: none; }

.container.ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after {
  display: none;

What I want to achieve looks like this:

.Navigation__container___1S9AX {
  flex-grow: 1 !important; }

.Navigation__container___1S9AX.ant-layout-sider-collapsed .anticon {
  font-size: 16px;
  margin-left: 8px; }

.Navigation__container___1S9AX.ant-layout-sider-collapsed .nav-text {
  display: none; }

.Navigation__container___1S9AX.ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after {
  display: none;

Any help or guidance on understanding how to achieve this in css-modules would be greatly appreciated as my attempts at researching more information have been unsuccessful.

csssasscss-selectorscss-modules

Answer №1

Here is the correct coding syntax:

.container {
    &:global(.ant-layout-sider-collapsed) {
         :global(.anticon) {
              //styles for anticons
         }
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to show inline icons within menu items?

Issue Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question"). Fig. 1. Display of menu after selection with the icon and t ...

javascriptcssreactjsmaterial-ui

What steps can I take to make changes to this Javascript code without interrupting its functionality

Recently, I came across a piece of inherited code that I'm trying to modify to suit my needs. However, I seem to have reached a dead end with customizing it. It seems like the following code snippet is causing some issues: jQuery(function($){ var pho ...

javascriptjqueryhtmlcss

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

javascripthtmlcssangularjs

Images inside columns are not being properly displayed in a PHP for loop when using Bootstrap

I have created a bootstrap page in which I am attempting to showcase images inside bootstrap columns. Below is the code snippet that I have used: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset ...

htmlcssimagebootstrap-4width

Challenges with implementing @Html.EditorForModel

Currently, I am developing a web application using asp.net's mvc-5 framework. In this project, I have implemented the following model class: public class Details4 { [HiddenInput(DisplayValue=false)] public string RESOURCENAME { se ...

cssasp.netrazorhtml-helperasp.net-mvc-5

Leveraging bootstrap's grid system to prioritize content layout based on the

Currently working on a compact React Js project with Bootstrap for styling. One obstacle I've encountered is the need to display the last element as the first one on the page. To achieve this, I plan to utilize the order-1 and order-12 classes from Bo ...

javascriptcssreactjsbootstrap-4

Steer clear of moving elements around in d-flex or similar layouts

I am looking to arrange elements in a linear manner with equal spacing between them. While I can achieve this using Bootstrap 5 flex, the spacing changes when the text length of a button is altered. https://i.sstatic.net/kVc8l.png For example, the element ...

htmlcsstwitter-bootstrapbootstrap-5

Utilize Bootstrap to position the button right next to the input field

I am having trouble aligning the button on the right next to the email textbox. Unfortunately, my attempts have not been successful. Fiddler: https://jsfiddle.net/Vimalan/mt30tfpv/4/ <div class="col-xs-3"> <div class="fo ...

htmlcsstwitter-bootstrap

Extended sticky navigation bar reaching beyond right margin

My website features a navigation bar that is created using the following code: body { margin: 3em; } #navbar { overflow: hidden; background-color: #333; } .sticky { position: fixed; top: 0; width: 100%; } <div id="navbar"> &l ...

htmlcssnavigationbar

Conceal all components on a webpage with the exception of a designated div

I am looking to selectively hide elements on the page, revealing only the contents of div.k1. The page contains numerous elements. How can I achieve this using just CSS? <div>1-this will be hidden</div> <div class="k1"> 2-this div wi ...

htmlcss

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

htmlcsshtml-table

Issue with CSS :hover not working due to jQuery altering CSS properties

My website has a specific set of <p class="first"> elements that change background color on hover using CSS. <div id="row_1"> <p class="first">first_1</p> <p class="first">first_2</p> <p class="firs ...

jqueryhtmlcss

Deactivate click events in the container div

Here is the html code snippet that I am working with: <div class="parent" ng-click="ParentClick()"> . . . <div class="child" ng-click="ChildClick()"> Some Text </div> </div> When clicking on Som ...

javascripthtmlcssangularjs

Trouble with placing an absolutely positioned element using Tailwindcss

I am currently working on a project using TailwindCSS in which I have a logo positioned to the left and navigation to the right. Both elements are centered, but because the logo has a position of absolute, it appears in front of the navigation. I would lik ...

csstailwind-css

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Visit this link to access the example in incognito mode. Click on the "open" button to open the sample signin form, then click on the "Sign Up" button to trigger the challenge. There seems to be an issue with using recaptcha inside a dialog. I'm not ...

javascriptcssvue.jsrecaptchainvisible-recaptcha

Set the style properties of one class to match the style properties of another class using JavaScript

I need to dynamically create a div using the Bootstrap panel for displaying it. The div's class will either be "panel panel-success" or "panel panel-danger" based on the server response, which can be either "success" or "failure." To assign the class ...

javascripthtmlcsstwitter-bootstrap

Troubleshooting the issue with form centering in Bootstrap

I've been attempting to center my form within a div, but the techniques I've applied are not yielding the desired result. I followed the bootstrap documentation and used the justify-content-center attribute, but it isn't aligning the form pr ...

htmlcssbootstrap-4

Does Blazorise support the Material .figure-is-16x16 class?

While Blazorise supports the .figure-is-16x16 class, I have noticed that when using it in Material, it does not work by default. I am curious if the Material version of Blazorise supports this class or if there is another related class available. Current ...

c#htmlcssblazorise

What is the best way to make a block fill 100% of a container-fluid?

Here is a block: <div class="container-fluid"> <div class="content_wrapper"> </div> </div> What's the best way to display the .content_wrapper block with 100% content width and margins from the body borders? ...

htmlcss

Difficulty in placing the logo within the navigation menu

Currently working on developing a website and encountering challenges with positioning the logo within the navigation bar. A test version of the site can be found at The logo is not centered properly in its designated space, especially in smaller browser ...

htmlcssnavbar