出于某种原因，我无法更改此HTML正文的CSS。在index.js中，我有一个带有类名称signIn的div，其中包含一个主体，而当我尝试更改styles.css中的CSS（主体）时，它不起作用。奇怪的是，我还有另一个带有HTML的js文件（Roulette.js），可以更改主体了。和index.js一样，我还有一个可以很好地定位的h1。
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import Roulette from './Roulette';
class LogIn extends React.Component {
render() {
return (
<div className="signIn">
<body>
<Router>
<Switch>
<Route path='/signIn'>
<h1>
HELLO
</h1>
UNRELATED CODE HERE
</Route>
<Route path="/roulette" component={Roulette}/>
</Switch>
</Router>
</body>
</div>
);
}
}
ReactDOM.render(<LogIn />, document.getElementById('root'));
Roulette.js：
import React from 'react';
import MenuBar from './MenuBars'
class HomePage extends React.Component {
render() {
return (
<div className="roulette">
<body>
<MenuBar />
<h1>TESTING</h1>
</body>
</div>
)
}
}
export default HomePage;
styles.css：
.signIn body {
background-image: url(img/csgoImage.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #33333D;
}
.signIn h1 {
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
color: aqua;
}
.roulette body {
background-image: none;
background-color: green;
}
body是html的第二大父元素。因此，您的CSS选择器.signIn body的意思是“类signIn内的主体”。它应该是.signIn, body {/* your css here */}
.signIn, body {
background-image: url(img/csgoImage.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #33333D;
}
.signIn h1 {
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
color: aqua;
}
.roulette, body {
background-image: none;
background-color: green;
}
希望这可以解决您的问题。