CODEWITHSUNDEEP
javascriptcssreactjs
traveler316
traveler316

Reputation: 107

Why Are My CSS Files Applied To Every React Componnent?

Background:

I'm making a recipe app that has a login component, registration component, app component, recipe component, and a recipe_tile component.

I have three CSS files: Registration.CSS, Login.CSS, and APP.CSS. The first two css files are for the registration and login component respectively. Whereas, the APP.CSS file is used for the app, recipe, and recipe_tile component.

Issue:

The problem is certain CSS selectors like background (which contains a background image) shows up for every single component despite the relevant CSS file is imported into the component. For example, Registration.CSS is the only CSS file imported into the registration component.

I know that a possible solution is to use inline styling in each component, but that could be tedious and harder to read. Is there any other possible solution that I can do?

Registration.CSS file:

*{
    margin: 0
}
body{
    font-family: "Open Sans", sans-serif;
    top: 0;
    left: 0;
    background: 
    linear-gradient(
        rgba(0, 0, 0, 0.45), 
        rgba(0, 0, 0, 0.45)
      ),
    url("https://i.imgur.com/9MDiW6B.jpg") 70% fixed;
  background-size: cover;
}

.box{
    color:#26a69a;
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 40%;
    height: 600px;
    padding: 100px;
    background: #ffffff;
    margin-left: 30%;
    margin-top: 5%;
}

Login.CSS file: 


.wrap{
    font-family: "Open Sans", sans-serif;
    top: 0;
    left:0;
    background: 
    linear-gradient(
        rgba(0, 0, 0, 0.45), 
        rgba(0, 0, 0, 0.45)
      ),
    url("https://i.imgur.com/9MDiW6B.jpg") 70% fixed;
  background-size: cover;
}

.wrap{
    color:#26a69a;
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 40%;
    height: 400px;
    padding: 100px;
    background: #ffffff;
    margin-left: 30%;
    margin-top: 5%;
}

APP.CSS file: 

*{
  margin-left: 15px;
}
h1{
  color:#26a69a
}
.inputs{
  margin-left: 400px;
}
.recipe-input{
  width: 50%;
}
.button-input{
  margin-top: 30px
}
.card{
  display: inline-block;
  margin: 2px 100px 60px 2px;
  text-align: center;
  width: 25%;
  height: 460px; 
}
.card-image{
  display: block;
  margin-left: -15px;

  width: 105%;
  height: 250px;
}
.card-reveal{
  text-align: left;
}

Here is the full source code: https://github.com/SibRaza15/recipe_app/tree/master/src

Upvotes: 2

Views: 3110

Answers (2)

benard-kong
benard-kong

Reputation: 2637

I don't believe CSS can be dynamically loaded and unloaded from the base HTML file the way you're thinking. Once it's loaded, it's loaded into the HTML.

I can think of two solutions to your problem:

  1. Give class names to the components so other CSS selectors do not interfere.

  2. Use a CSS in JS solution, in which one component will have its own styling and you needn't worry about a global scoped CSS selector interfering. The most popular one is styled-components. The biggest advantage for switching to CSS in JS solutions is you can pass your props directly to the styled component (ie. styled divs) and have JavaScript style logic for dynamic styling.

Upvotes: 1

andrralv
andrralv

Reputation: 860

I see multiple anti-patterns. As a rule of thumb, don't use * for styling as you will run into problems just like this one. Instead, create a className for every component and style within that className to keep everything separated. I see that your Register.css is targeting the whole document body, where it should just style within the Register.js component.

I'm talking about doing something like:

Foo.js

import React from 'react'
import './Foo.css'

const Foo = (props) => {
  return (
    <div className="foo">
      <h4>whatever</h4>
    </div>
   )
}

export default Foo;

Foo.css

.foo {
  ... style here
}

.foo h4 {
  ... style other components or tags inside of foo
}

Also, keep App.css only for styles that are absolutely global, like the font type and link colors and such. Don't try to style individual components from there.

Upvotes: 1

Related Questions