0
281
Vistasusing .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.
when I inspected it, below is coming.
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?
2 Respuestas
Responde la pregunta0
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';
0
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.