为什么我的 CSS 文件适用于每个 React 组件？

Question

背景：我正在制作一个具有登录组件、注册组件、应用程序组件、食谱组件和 recipe_tile 组件的食谱应用程序。我有三个 CSS 文件：Registration.CSS、Login.CSS 和 APP.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

我看到了多种反模式。根据经验，不要*用于样式，因为您会遇到像这样的问题。相反，为该类名中的每个组件和样式创建一个类名，以保持所有内容分开。我看到您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仅保留绝对全局的样式，例如字体类型和链接颜色等。不要尝试从那里设置单个组件的样式。

Answer 2

我不相信 CSS 可以按照您的想法从基本 HTML 文件中动态加载和卸载。一旦它被加载，它就会被加载到 HTML 中。

对于您的问题，我可以想到两种解决方案：

1. 为组件指定类名，以便其他 CSS 选择器不会干扰。

2. 在 JS 解决方案中使用 CSS，其中一个组件将有自己的样式，您不必担心全局范围的 CSS 选择器会干扰。最流行的是styled-components。在 JS 解决方案中切换到 CSS 的最大优势是您可以将 props 直接传递给样式化组件（即样式化 div），并具有用于动态样式的 JavaScript 样式逻辑。