react-application-injectcss

react-application-injectcss copied to clipboard

Hey, when I first tried this solution, I could successfully style most elements and definitely those, which were loaded by web parts. But some other elements could not be styled because the styles were applied before those were loaded (for example: the "share" & "follow" button in the top right corner of modern pages, or the "Sharepoint" label or the tenant logo in the top header). I could make styling those elements possible by loading the content of the custom css file into a newly placed

if (cssUrl) {
		const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
		fetch(cssUrl).then(function (response) {
			// The API call was successful!
			return response.text();
		}).then(function (css) {
			// This is the CSS from our response as a text string
			head.insertAdjacentHTML("beforeEnd", "<style type='text/css'>" + css + "</style>");
		}).catch(function (err) {
			// There was an error
			console.warn('Something went wrong.', err);
		});
    }

I am not sure if this is a good solution, but it works and makes it possible to style all elements. @hugoabernier If you advocate this solution, you might want to change it in your code

Best wishes

It seems like a good solution, but I'd have to try it to see.