'using .scss file instead of css file in react

in my project I am using .sccs file for css. now I have one strange issue. I have one browser extension which is coming over the input component. its image id is static so i need to hide it. enter image description here

when I inspected it, below is coming.

enter image description here

in my .scss file I wrote below code.

  #__lpform_react-select-3-input_icon{
    visibility: hidden;
    display: none;
  }

its not working at all. then I created one additional .css file and just imported it and it is working perfectly fine. if I write in below in my .scss file ,it hides all the image including this one. I need to get rid of only this image.

img{
visiblity:hidden ;
}

is there anything in addtion I need to do in my scss file so that it works? because architect is not allowing me to create additional .css file and asked me to put my changes in my .scss file.

my question is why it is working in css file and not in scss file. what additional step I need to do? could you please help me with that?

javascripthtmlcssreactjssass


Solution 1:[1]

For React you need to install the sass library.

Installation:

npm i sass

Create your sass file.

ex:

my-file.scss

Import the sass file in your javascript file.

ex:

import './my-file.scss';

Solution 2:[2]

React packages all your scss into one file and scopes them in the root element, so they don't work for elements outside the root element. If you want to hide the img using styles, you'd have to write those styles in a style tag in your public/index.html file.

<!-- public/index.html -->

<body>
 <div id="root"></div>

 <!-- add this here -->
 <style>
  #__lpform_react-select-3-input_icon{
    visibility: hidden;
    display: none;
  }
 </style>
 
</body>

OR

You could use the dreaded document.getElementById("#__lpform_react-select-3-input_icon") api; Now I know you're not supposed to use it in react projects, but since this element is generated - as you mentioned - through an extension, react has no control over it, so there is no actual way react can access that element. Thus I think the use of document.getElementById() is justified in this case.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hamster
Solution 2 Sadra M.

Related Questions