CODEWITHSUNDEEP
reactjs
Sean Chang
Sean Chang

Reputation: 53

How do you style nested css in react?

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);
          }
        }
      }
    }
  }

Upvotes: 5

Views: 14799

Answers (1)

Bayu
Bayu

Reputation: 2644

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

Upvotes: 3

Related Questions