如何在react中为不同于App.css的组件提供样式

Question

考虑我的React应用程序的App.css：-

* {
margin: 0;
background-color: white;
}

现在，当我给任何其他组件的背景颜色为黑色时，我看不到任何可见的变化，即，App.css的背景颜色覆盖了我的组件的背景色属性。我怎样才能克服这个问题。

编辑：这是CSS代码

.image {
float: left;
padding-left: -5px;
padding-top: 50px;
}
.registerCard {
position: absolute;
display: block;
background-color: rgb(255, 255, 255) !important;
top: 35%;
left: 30%;
}

.container {
display: block;
}

我想把registerCard的背景颜色设置为白色，是的，我试过了！很重要，但也没用。

这是App.css文件：-

* {
margin: 0;
background-color: #d1d4c9;
}

这是组件的js文件：-

import React from 'react'
import img from "./images/bg.png"
import "./register.css"
function Register() {
return (
<div>
<img className = "image" src = {img} />
<div className="registerCard" >
<form action="/action_page.php" >
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr/>

<label for="firstName"><b>First Name</b></label>
<input type="text" placeholder="Enter Email" name="email" required/>
<br/>
<label for="lastNamel"><b>Last Name</b></label>
<input type="text" placeholder="Enter Email" name="email" required/>
<br/>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required/>
<br/>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required/>
<br/>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required/>
<br/>
<label>
<input type="checkbox" checked="checked" name="remember" /> Remember me
</label>

<p>By creating an account you agree to our <a href="#" >Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
</div>
)
}
export default Register

我已经将CSS文件导入到组件的js文件中，是否也需要将其导入到App.js？？

Answer 1

您可以使用一些技巧来解决问题。尝试以下内容。

1. 确保将组件的样式(css、scss、sass、less(文件导入到组件文件中
2. 选择选择器时要更加具体。(试试这些链接：css选择器，css组合子(
3. 在要覆盖的css规则末尾使用!important规则。查看下面的示例

App.css

* {
margin: 0;
background-color: white;
}

组件.css

.class-to-add-style {
background-color: red !important; /* this rule will override the rule from App.css */
}

Answer 2

这个问题可能有不同的答案，因为你不是很具体。。。

无论如何，我认为这是因为你在你的Ap.js文件中导入了你的App.css，但对你的其他组件却没有这样做。

考虑您的组件名为MyComponent:

import React from "react";
import "./MyComponent.css";

function MyComponent() {
return(
<h1>example</h1>
);
}
export default MyComponent;

* {
margin: 0;
background-color: yellow;
}