Why do the CSS styles disappear when trying to change the className in react js?

Question

I'm building a simple react app, and in that I try to change the name of a div using the statement -

<div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} id="tab" ></div>

but the CSS part for it disappears when trying to do so. The rest of the page works fine so there's no linking problem to the CSS file. And when I try to use only the ID name instead of the class names, the styles work fine. Only when using the class names in the CSS the styles disappear and they don't even show on the developer tools when using inspect. The class names do appear in the class attribute in HTML part of the developer tools, but the CSS properties do not.

I use a simple useState Hook for the conditional statement -

    const [page, setPage] = useState([{
    login: true,
    signUp: false
  }])

Here's the CSS -

 #tab .changeTab .leftSide{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  background: -webkit-linear-gradient(right,#4361ee,#4cc9f0);
  transition: all 0.6s cubic-bezier(0, 1.17, 0, 0.69);
  border-radius: 5px;
}

#tab .changeTab .rightSide{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  background: red;
  margin-left: -50%;
  transition: all 0.6s cubic-bezier(0, 1.17, 0, 0.69);
  border-radius: 5px;
}

I'm new to react so any help would be very much appreciated

Please, put your code on Codesandbox so we can take a live look and help you. — Luka
– Luka, Commented Jul 11, 2021 at 8:16
Do you get any console errors? If so, post them in your question. — Martin
– Martin, Commented Jul 11, 2021 at 8:18
@Luka Here's the Codesandbox link - codesandbox.io/s/simpleloginsignup-zenw1 — Akhouri Soumya Prakash
– Akhouri Soumya Prakash, Commented Jul 11, 2021 at 8:25
@Martin No I don't get any errors in the console, only a single type of warning about href attribute not having a valid value. I just put '#' in the href values as I don't need it — Akhouri Soumya Prakash
– Akhouri Soumya Prakash, Commented Jul 11, 2021 at 8:27

Martin · Accepted Answer · 2021-07-11 08:27:40Z

1

The logic in your CSS specification seems to be flawed.

I believe that you are trying to apply styling to an element that has the id tab AND the class changeTab AND the class either leftSide OR rightSide.

Right now, you're telling your CSS to look for nested classes of the parent id tab.

That means your CSS is trying to find a child of id tab that has the class changeTab and then it again looks for a child of that element with the class leftSide or rightSide.

Your CSS should be the following:

#tab.changeTab.leftSide{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  background: -webkit-linear-gradient(right,#4361ee,#4cc9f0);
  transition: all 0.6s cubic-bezier(0, 1.17, 0, 0.69);
  border-radius: 5px;
}

#tab.changeTab.rightSide{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  background: red;
  margin-left: -50%;
  transition: all 0.6s cubic-bezier(0, 1.17, 0, 0.69);
  border-radius: 5px;
}

Note how I removed the spacing in your CSS. This tells the CSS to look for an element that must have the id tab but also the classes changeTab and either leftSide or rightSide.

answered Jul 11, 2021 at 8:27

Martin

2,4221 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akhouri Soumya Prakash Over a year ago

Yes that worked. I didn't know that spacing would mean nesting. Thanks a bunch for your help!

Collectives™ on Stack Overflow

Why do the CSS styles disappear when trying to change the className in react js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related