Overlapping CSS in React, Webpack Application

Overlapping CSS in React, Webpack application

You can have local stylesheets for each React component.

So the style sheet itself will have something like this:

:local(.styles) {

  .your-style{...}
}

You can store it in the same folder as your component code. You import the style like so:

/* component styles */
import { styles } from './styles.scss'

In the render function of your component you will have this:

return (
  <div className={styles}>
  ...
  </div>
)

Everything within that <div> will have the stylesheet applied.

Loader configuration for your Webpack:

loaders: [{
  test: /\.scss$/,
  loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
}]

You can look at this awesome boilerplate app, that implements all of this very nicely.

React + scss styles overlapping from different files

This is my doubt. Your Sass files are converted to CSS file and in react if you use CSS files imported as import './somecss.css', your styles will leak out to other components. That's why they introduced CSS modules. If you are using CSS modules, there is a difference how you apply it. It's not like how a regular CSS class/id is applied.

CSS Modules let you use the same CSS class name in different files
without worrying about naming clashes.

You can get more info from docs

Addng css files in React project with Webpack 4

All you have to do is import the CSS files when needed as you would a JavaScript module. So if you want to have a style sheet for your whole application, you can import a global stylesheet in your index.js.

import './styles/index.css';

and you can do the same for each component with specific styles

import './styles/App.css'

in which case you might want to setup CSS modules to avoid overlapping class names.

Creating overlapping divs

So in order for them to be layered you either need to position them all absolute and then order them with either translating on the x and y axis and z-index, or using the top/bottom/left/right properties, I wouldn't recommend that because it's going to be tough to manage. It can also end up making the elements at the back inaccessible!

As the globe is a background image you could make that a background image over the top of a linear gradient like below, then your title and text can take up the space over the top of the background in their expected position within the normal document flow, and you can adjust them from there.

html, body {  width: 100%;  height: 100%;
}
body {  margin: 0;  background-repeat: no-repeat;  background: #fee807;  background-size: cover;  background: url(https://via.placeholder.com/250) 80% -35% no-repeat;  background: url(https://via.placeholder.com/250) 80% -35% no-repeat,    linear-gradient(        180deg,        rgba(254, 232, 7, 1) 0%,        rgba(240, 118, 75, 1) 37%,        rgba(212, 62, 128, 1) 70%,        rgba(129, 86, 158, 1) 92%    );}