如何在reactjs应用程序中设计多个页面的“主体”而不让它们相互重叠？
好吧，伙计们。
在以各种不同的方式尝试了多种不同的方法之后，我来到这里寻找肯定知道这个简单问题答案的专家。
因此，我遇到的问题是，每当我尝试将背景图像和其他属性添加到我正在创建的应用程序中的页面“主体”时，它只会为所有页面添加单个页面的 CSS其他页面。
如果这个问题听起来太沉重，让我把它归结为：
如何为多个页面的body标签添加不同的样式？
为了让事情变得简单，您可以查看以下代码：
这是登录文件
import React, { Fragment, useState } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { login } from '../../../actions/auth';
import './Login.css';
const Login = ({ login, isAuthenticated }) => {
const [formData, setFormData] = useState({
email: '',
password: ''
})
const { email, password } = formData;
const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = async e => {
e.preventDefault();
login(email, password)
}
if (isAuthenticated) {
return <Redirect to="/dashboard" />
}
return (
<Fragment>
<section className="bodyLogin">
<h1>Login</h1>
<form className="loginForm" onSubmit={e => onSubmit(e)}>
<input type="email"
name="email"
placeholder="Email.............."
value={email}
onChange={e => onChange(e)}
required /> <br /><br />
<input type="password"
name="password"
placeholder="Password.............."
value={password}
onChange={e => onChange(e)}
required /><br /><br />
<div className="account-login">
<p>Don't have an account? <span><Link to="/register">Register</Link> </span></p>
</div>
<div className="btn-login">
<input type="submit" name="Login" defaultValue="Log In" />
<Link to="/"><input type="button" name="Back" defaultValue="Back" /> </Link>
</div>
</form>
</section>
</Fragment>
)
}
Login.propTypes = {
login: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool
}
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { login })(Login);
它的CSS文件
html,
.Login>.bodyLogin {
height: 100%;
}
.Login>.bodyLogin {
background-image: url("/client/src/components/images/undraw_people_tax5.png"), url("/client/src/components/images/undraw_together_j0gj.png");
background-size: 80% 100%, 101% 100%;
background-repeat: no-repeat;
background-position: 1% 60%, 80% 110%;
}
现在，我想为其他页面添加不同的背景图像。但我得到的图像与用于 Login.js 的图像相同。
模块并没有真正发挥作用。你知道解决这个问题的方法吗？
我添加了以下功能组件，如下所示：
const Login = ({ login, isAuthenticated }) => {
useEffect(() => {
document.querySelector('body').style.backgroundImage = url("../../images/undraw_people_tax5.png");
})
但我被这个红色错误推倒了！
用于控制 React 外部标记的推荐 React 实践是React Helmet。
在每个组件中，包含Helmet定义主体样式（和其他属性）的 ，如下所示：
import Helmet from 'react-helmet';
function Page(props) {
const bgColor = '#ddd';
return (
<div class="page">
<Helmet>
{/* Define inline CSS for body tag */}
<body style="background-color: #ddd" />
{/* Or include in-file CSS */}
<style>
{`
body {
background-color: ${bgColor};
}
`}
</style>
</Helmet>
{/* Rest of your component content goes here ... /*}
</div>
);
}
Helmet可以通过组件层次结构和 CSS 级联等功能相互嵌套，因此您可以body根据需要在任何深度级别（子组件之间）进行自定义。
注意：此方法仅适用于在 React 外部的标记上定义 CSS，例如html, body。React 组件内部遵循更好的方法来导入受控 CSS，如CSS 模块、样式组件等。
更新1
在您的情况下，将 放置Helmet为 的第一个孩子<Fragment>：
<Fragment>
<Helmet>
<style>
{`
html, body {
height: 100%;
}
body {
background-image: url("/client/src/components/images/undraw_people_tax5.png"), url("/client/src/components/images/undraw_together_j0gj.png");
background-size: 80% 100%, 101% 100%;
background-repeat: no-repeat;
background-position: 1% 60%, 80% 110%;
}
`}
</style>
</Helmet>
{/* Rest of your Fragment goes here ... /*}
</Fragment>
更新2
如果你想使用 CSS 文件，不要像这样内联所有内容，而是将其替换import './Login.css)为：
const css = require('./Login.css').toString();
然后你<style>可以只包含 CSS 字符串：
<Helmet>
<style>
{css}
</style>
</Helmet>