Hello everyone,
After attempting different approaches in numerous ways, I have turned to the experts here who are sure to have the answer to this simple problem.
The issue at hand is that when I try to apply background images and other properties to the "body" of different pages within the app I am creating, it only applies the CSS of one page to all others.
To simplify my question:
How can I add distinct styles for the body tag across multiple pages?
For your convenience, you can refer to the code snippet below:
Here's the Login file
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 }) => {
...
}
Login.propTypes = {
...
};
...
export default connect(mapStateToProps, { login })(Login);
Its css file
html,
.Login>.bodyLogin {
...
}
.Login>.bodyLogin {
...
}
Currently, I want to incorporate different background images for other pages. However, I keep getting the same image as used in Login.js.
Modules did not yield desired results. Is there a proven method to address this issue?
I attempted adding the following functional component like this:
const Login = ({ login, isAuthenticated }) => {
useEffect(() => {
document.querySelector('body').style.backgroundImage = url("../../../images/undraw_people_tax5.png");
})
}
However, I encountered a red error message which halted my progress!