styling

Styling

The MERN-template comes with two raw .css files - styles.css and popup-chat.css. The former is applied to the front-end as a whole, while the latter applies only the the chat window. Feel free to alter either as you see fit.

If you'd like to customize specific pages without affecting others, this is possible. Under client/pages/utilities/, there's a component called ApplyToBody which sets the class for the body element, and removes it again when it is destroyed.

This allows the developer to make page-scoped changes in individual .css files, like so:

body.homepage h1 {
	font-size: 96pt;
	color: white;
	text-shadow: 5px 5px 15px black;
}

This above CSS will only apply to a page where ApplyToBody has been given the className homepage, like so:

import React from 'react';
import './styles/styles-homepage.css';

const HomePage = props => {
	return (
		<>
			<ApplyToBody className='homepage' />
			<div className='page'>
				<h1>Hello World!</h1>
			</div>
		</>
	);
};

export default HomePage;