I have a basic front end auth login react component page that loads when the page is first rendered. upon successful login:
visibility hidden in login.css and visibility:visible in app.css.opacity:0 in login.css and opacity:100 in app.css. as well as some other trouble shooting css that didn't work.login.css is overriding the app.css no matter what.I am new to this so sorry if this is a dumb question just really need some help thank you in advance.
To directly address your question, the CSS property you want to be using is display and set it to none. If that still doesn't seem to work, check the specificity of your selector and verify that you're selecting the intended element. As a last resort use !important in your attribute to override all styles.
Since you're using React though, I highly recommend that you don't depend on CSS for this but rather use conditional rendering, e.g.
return (
<div>
{loggedIn ? (
User dashboard or whatever...
) : (
Display login form
)}
</div>
);