Note: No need to understand my code, just focus on the 3 components files Palette.js, Palette.css and footer.js
Firstly I created my footer component in Palette.js and write CSS for its styling in Palette.css, which is linked to only Palette.js. in order to use the footer in different files, I created a new footer component in a separate file[footer.js] but forget to import styles from Palette.css which are used to style my footer, I removed my whole footer component from Palette.js and import my footer component from footer.js in Palette.js My footer component looks like [footer.js without any stylesheet]
import React, { Component } from 'react'
function Footer(props){
const { creater, emoji, paletteName} = props;
return (
<footer>
<h2 className="palette-creater">Palette Created by : {creater}</h2>
<div className="palette-identity">
<span className="palette-emoji">
{emoji}
</span>
<span className="palette-name">
{paletteName}
</span>
</div>
<h3 className="palette-copyright">All rights reserved @ Colors.io 2021</h3>
</footer>
)
}
export default Footer;
My Palette.js looks like
import React, { Component } from 'react'
import ColorBox from './ColorBox';
import NavBar from './NavBar';
import Footer from './footer' ;// imported my footer
import './Palette.css';
//styles for footer component in footer.js are still in this file
export default class Palette extends Component{
render(){
return (
<Footer creater={creater} emoji={emoji} paletteName={paletteName} />
)
}
}
As you can see my footer.js has no styles and my Palette.js has a CSS file palette.css which has styles for my footer. Also, the styles for my footer in the Palette.css looks like
footer{
background-color: #ced0d1;
font-family: 'Red Hat Display', sans-serif;
padding: 5px;
text-align: center
}
.palette-creater{
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
font-weight: 500;
letter-spacing: 3px;
}
.palette-identity{
display: flex;
justify-content: space-around;
}
.palette-name{
font-size: 1.1rem;
font-weight: 400;
}
.palette-emoji{
display: block;
font-size: 1rem;
}
.palette-copyright{
margin:0;
padding-bottom: 5px;
}
How my styles are applying to the footer component from Palette.css, which is not even linked with the footer.js, and also no matter wherever I import my footer component from footer.js and used it, it's always applying styles from Palette.css. My application is pretty large, I cannot post all the code.
Example just think of that I make a new file app.css and linked it with only App.js and writes all the styles of the application in app.css, then all the components take styles from here.
