Почему мои CSS файлы применяются к каждому компоненту React?

Question

Справочная информация:

Я делаю приложение для рецептов, которое имеет компонент входа в систему, компонент регистрации, компонент приложения, компонент рецепта и компонент recipe_tile.

У меня есть три CSS файла: Регистрация. CSS, Вход. CSS и ПРИЛОЖЕНИЕ. CSS. Первые два файла css предназначены для компонента регистрации и входа в систему соответственно. Принимая во внимание, что файл APP. CSS используется для компонента app, recipe и recipe_tile.

Проблема:

Проблема в том, что CSS селекторов, таких как фон (который содержит фоновое изображение), отображается для каждого компонента, несмотря на соответствующий файл CSS импортируется в компонент. Например, Registration. CSS - единственный файл CSS, импортированный в компонент регистрации.

Я знаю, что возможное решение заключается в использовании встроенного стиля в каждом компоненте, но это может быть утомительным и сложным для чтения. Есть ли другое возможное решение, которое я могу сделать?

Регистрация. CSS файл:

*{
    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%;
}

Логин. CSS файл:

.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 файл:

*{
  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;
}

Вот полный исходный код: https://github.com/SibRaza15/recipe_app/tree/master/src

Answer 1

Я не верю, что CSS можно динамически загружать и выгружать из базового файла HTML так, как вы думаете. После загрузки он загружается в HTML.

Я могу придумать два решения вашей проблемы:

1. Дать имена классов компонентам, чтобы другие селекторы CSS не мешали.

2. Используйте решение CSS in JS, в котором один компонент будет иметь собственный стиль, и вам не нужно беспокоиться о влиянии селектора глобальной области действия CSS. Наиболее популярным является styled-components . Самое большое преимущество при переходе на решения CSS в JS заключается в том, что вы можете передавать свои реквизиты непосредственно в стилизованный компонент (ie. Styled divs) и иметь логи JavaScript style c для динамического c стиля.

Answer 2

Я вижу несколько анти-паттернов. Как правило, не используйте * для стилизации, так как вы столкнетесь с такими же проблемами. Вместо этого создайте className для каждого компонента и стиля в пределах этого className, чтобы держать все разделенными. Я вижу, что ваш Register.css нацелен на все тело документа, где он должен просто стилизоваться внутри компонента Register.js.

Я говорю о том, чтобы сделать что-то вроде:

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
}

Кроме того, сохраняйте App.css только для абсолютно глобальных стилей, таких как тип шрифта и цвета ссылок и тому подобное. Не пытайтесь стилизовать отдельные компоненты оттуда.