为什么我的CSS文件应用于每个React组件？
背景：
我正在制作具有登录组件，注册组件，应用程序组件，食谱组件和recipe_tile组件的食谱应用。
我有三个CSS文件：Registration.CSS，Login.CSS和APP.CSS。前两个css文件分别用于注册和登录组件。而APP.CSS文件用于app，recipe和recipe_tile组件。
问题：
问题是，尽管相关的CSS文件已导入到组件中，但某些CSS选择器（如背景（包含背景图像）仍会为每个组件显示）。例如，Registration.CSS是导入到注册组件中的唯一CSS文件。
我知道一种可能的解决方案是在每个组件中使用内联样式，但这可能很乏味且难以阅读。我还有其他可能的解决方法吗？
Registration.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(".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文件：
.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(".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;
}
这里是完整的源代码：
回答如下：我不相信CSS可以按照您的想法从基本HTML文件动态加载和卸载。加载后，将其加载到HTML中。
我可以想到两种解决您的问题的方法：
为组件提供类名，以免其他CSS选择器干扰。
使用JS解决方案中的CSS，其中一个组件将具有其自己的样式，您不必担心全局范围的CSS选择器会产生干扰。最受欢迎的是styled-components。在JS解决方案中切换到CSS的最大优势是，您可以将道具直接传递给样式化的组件（即样式化的div），并具有用于动态样式化的JavaScript样式逻辑。
为什么我的CSS文件应用于每个React组件？
背景：
我正在制作具有登录组件，注册组件，应用程序组件，食谱组件和recipe_tile组件的食谱应用。
我有三个CSS文件：Registration.CSS，Login.CSS和APP.CSS。前两个css文件分别用于注册和登录组件。而APP.CSS文件用于app，recipe和recipe_tile组件。
问题：
问题是，尽管相关的CSS文件已导入到组件中，但某些CSS选择器（如背景（包含背景图像）仍会为每个组件显示）。例如，Registration.CSS是导入到注册组件中的唯一CSS文件。
我知道一种可能的解决方案是在每个组件中使用内联样式，但这可能很乏味且难以阅读。我还有其他可能的解决方法吗？
Registration.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(".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文件：
.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(".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;
}
这里是完整的源代码：
回答如下：我不相信CSS可以按照您的想法从基本HTML文件动态加载和卸载。加载后，将其加载到HTML中。
我可以想到两种解决您的问题的方法：
为组件提供类名，以免其他CSS选择器干扰。
使用JS解决方案中的CSS，其中一个组件将具有其自己的样式，您不必担心全局范围的CSS选择器会产生干扰。最受欢迎的是styled-components。在JS解决方案中切换到CSS的最大优势是，您可以将道具直接传递给样式化的组件（即样式化的div），并具有用于动态样式化的JavaScript样式逻辑。
发布评论