How do you style nested css in react?

Question

I have nested selectors in my css file. I'm new to React and trying to make it work with my js file. Does anyone have any tips?

I found: https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945

It seems to be helpful but does not mention how to deal with nested css. For example, I have &:before and &:after, @include signUpActive, among others. This is really some confusing stuff.

.img {
    overflow: hidden;
    z-index: 2;
    position: absolute;

    &:before {
      content: '';
      position: absolute;
      transition: transform 1.2s ease-in-out;
    }

    &:after {
      content: '';
      position: absolute;
    }

    @include signUpActive {
      &:before {
        transform: translate3d(640px,0,0);
      }
    }

    &__text {
      z-index: 2;
      position: absolute;
      transition: transform 1.2s ease-in-out;

      &.m--up {
          @include signUpActive {
          transform: translateX(260px*2);
        }
      }

      &.m--in {
        transform: translateX(260px * -2);
        @include signUpActive {
          transform: translateX(0);
        }
      }
    }

    &__btn {
      overflow: hidden;
      z-index: 2;
      position: relative;

      &:after {
        content: '';
        z-index: 2;
        position: absolute;
      }

        &.m--in {
          transform: translateY(36px*-2);
          @include signUpActive {
            transform: translateY(0);
          }
        }

        &.m--up {
          @include signUpActive {
            transform: translateY(36px*2);
          }
        }
      }
    }
  }

Are you using sass or similar?

Chance
– Chance

2019-01-18 03:44:39 +00:00
Commented Jan 18, 2019 at 3:44 — Chance
– Chance, Commented Jan 18, 2019 at 3:44
if I wanted to avoid sass, does anyone know an alternative?

Fernando B
– Fernando B

2021-01-15 15:41:10 +00:00
Commented Jan 15, 2021 at 15:41 — Fernando B
– Fernando B, Commented Jan 15, 2021 at 15:41

Bayu · Accepted Answer · 2021-07-23 16:44:18Z

It is actually not "nested CSS". But it is a SASS/SCSS code. Both SASS and SCSS have similar purposes, with several slight differences. Please check here for more detail: https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/ . Personally, I would suggest SCSS over SASS by considering it is less strict than SASS.

If you like to use just normal CSS, then just write and import CSS scripts to your react. It will be no problem. You should not follow that "nested CSS" way which is SASS/SCSS ( I would not recommend that actually ).

Let assume you stick with SASS/SCSS. If you are using "CRA" ( create react application ), it is just as simple as import your .scss file to react component like the following:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.scss";

function App() {
  return (
    <div className="App">
      <div className="panel">
        <h2>Panel</h2>
        <div className="panel__inner">
          <h3>Inner panel</h3>
        </div>
      </div>
    </div>
  );
}

While the styles.scss is just a normal SCSS code at same directory, like follow:

@import "./scss-mixins/mixins.scss"; //Using relative path to the .scss file

.App {
  font-family: sans-serif;
  text-align: center;

  .panel {
    padding: 15px;
    background: #f9f9f9;

    &__inner {
      padding: 10px;
      background: green;
    }
  }
}

Just ensure that you have node-sass in your package. Otherwise you should do npm install node-sass --save. Please read more at official documentation here: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet.

You can check working example at: https://codesandbox.io/s/x2z4ly6y2z

Collectives™ on Stack Overflow

How do you style nested css in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related