I have implemented react-universally as the boilerplate for my ReactJS application and I am using bootstrap 4 for styling. The main component, DemoApp, is defined as follows:
import 'normalize.css/normalize.css';
import React from 'react';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
import Helmet from 'react-helmet';
import config from '../../utils/config';
import './globals.css';
import Error404 from './Error404';
import Header from './Header';
import AsyncHomeRoute from './AsyncHomeRoute';
import AsyncCounterRoute from './AsyncCounterRoute';
import AsyncAboutRoute from './AsyncAboutRoute';
/// Should change the language below according to user preference language
function DemoApp() {
return (
<div style={{ padding: '2rem' }}>
<Helmet>
<html lang="en" />
<title>{config('htmlPage.defaultTitle')}</title>
<meta name="application-name" content={config('htmlPage.defaultTitle')} />
<meta name="description" content={config('htmlPage.description')} />
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="msapplication-TileColor" content="#2b2b2b" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
<meta name="theme-color" content="#2b2b2b" />
{/* A great reference for favicons:
https://github.com/audreyr/favicon-cheat-sheet
It's a pain to manage/generate them. I run both these in order,
and combine their results:
http://realfavicongenerator.net/
http://www.favicomatic.com/
*/}
//remaining code removed for brevity
<link rel="manifest" href="/manifest.json" />
{/*
NOTE: This is simply for quick and easy styling on the demo. Remove
this and the related items from the Content Security Policy in the
global config if you have no intention of using milligram.
*/}
</Helmet>
// remaining code removed for brevity
);
}
export default DemoApp;
Additionally, here is an excerpt from my global.css file which styles the entire application:
html {
box-sizing: border-box;
font-family: 'Tangerine', serif !important;
color: red;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li { display: inline; margin: 0 .5rem; }
The issue I am facing is that the font set (Tangerine) is not displaying as expected. It seems like it gets overridden by bootstrap's _reboot.css which sets all fonts to the bootstrap default.
I suspect that the problem arises from the import "./globals.css" command executing before loading bootstrap, causing bootstrap to overwrite my font settings with _reboot.
My question is, within the context of the DemoApp component approach, how can I reverse the order of loading so that globals.css is loaded after bootstrap completes its setup cycle, allowing my fonts to be utilized without interference?
If such inversion is not feasible, are there alternative solutions available to globally establish bootstrap variables in a ReactJS environment?
Your assistance is greatly appreciated.