Linking to CSS Files from React Index

How to import a CSS file in a React Component

You don't even have to name it if you don't need to:

e.g.

import React from 'react';
import './App.css';

see a complete example here (Build a JSX Live Compiler as a React Component).

in react, how to change CSS files linked in the head of index.html?

so what I did is getting the link tag that has the direction style and changes it's href to the other CSS file, and it works fine.

index.html

<link rel="stylesheet" id="style-direction" href="/css/style-ltr.css">

then in the component, i do something like that

const style = document.getElementById('style-direction');
if (lang === 'ar') {
  style.href = '/css/style-ltr.css';
} else {
  style.href = '/css/style-rtl.css';
}

Related Topics