Essential React
Styling

SASS / SCSS

CSS preprocessor

Features

  • Mixins
  • Function
  • ...

Mixin

              
                @mixin mobile-only {
                  @media (max-width: $mobile-width) {
                    @content;
                  }
                }
              
            
              
                .root {
                  @include mobile-only {
                    display: none;
                  }
                }

Function

                
                  @function spacing($space) {
                    @if $space == 4 {
                      @return "4px";
                    } @else if $space == 8 {
                      @return "8px";
                    }
                    ...
                  }
                
              
                
                  .root {
                    padding: spacing(4);
                  }

Setup in CRA

              
                $ npm install sass --save-dev

CSS Modules

Locally scoped CSS

Class conflict

Component1.scss

              
                .root {
                  color: red;
                }

Component2.scss

              
                .root {
                  color: green;
                }
              
            
              
                .root { color: red; }

to

              
                .root-h2l5l { color: red; }
              
            
              
                import styles from './Component.module.scss';

classnames

A helper package for common className requirements

Apply multiple classNames

Apply conditional className

More info about classnames:

classnames

Exercise

  1. Add CSS Modules, SASS and classnames
  2. Style the detail view as you like

Stretch Goal

  1. Make detail view fade in
  2. Make pokemon image fade in after it's loaded (check demo app)

Additional styling options

Some nice to know approaches for styling

Tailwind CSS

Utility-first CSS framework

Elements are styled using utility CSS classes.

tailwindcss.com

CSS in JS

Extending CSS with JS features

There are different CSS in JS approaches, e.g.:

Recap

We learned…

  • How to work with SASS in CRA
  • How to work with CSS Modules in CRA
  • Other styling solutions

Questions?