如何在一个css文件中隐藏div但在另一个css文件中显示

Question

I have a basic front end auth login react component page that loads when the page is first rendered. upon successful login:

• it renders the app component.
• I have a login.css file and a app.css file.
• in my html document i had to add code for a form to submit some user input for the app side of things. I do not want this form to appear on the login side of things just once the app side has rendered.
• On the div classname I have tried visibility hidden in login.css and visibility:visible in app.css .
• I have tried opacity:0 in login.css and opacity:100 in app.css. as well as some other trouble shooting css that didn't work.
• It appears the 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.

Answer 1

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, eg

return (
  <div>
    {loggedIn ? (
      User dashboard or whatever...
    ) : (
      Display login form
    )}
  </div>
);