Adding CSS in React file

Question

How do I add specific CSS file which I have in a variable?

render {

 const {styleSheet} = this.prop;

 return (
    <div className={styleSheet}>
       <h4> Hi </h4>
    <div>
 )
}

Let say I have that stylesheet prop can have values as red , green and blue

red for font colour red and content in left.
green for font colour green and content in center.
blue for font colour blue and content in right.

How I can create diffrent style sheet files for each value?

ps. i am trying to create something in which i will have template... template will have lots of same data but with diffrent styling...as an example if we take a report card...each report card have same data but it have diffrent tempates.....so i want to create diffrent stylesheets for diffrent templates...now please answer.

Maybe this link will be helpful: `Four ways to style react components` https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 — Ezra Siton, Aug 29 '20 at 10:02
so what you want is to add a different css file to every component instance? — CamiEQ, Aug 29 '20 at 11:19
yes the templateStyle will decide styling for each component, it will be diffrent in each style sheet value. — SAWAI JAIN, Aug 29 '20 at 11:24

score 0 · Answer 1 · answered Aug 29 '20 at 10:01

0

Can't you simply have rules matching each className in your CSS ? Like :

.red {
 color: #ff0000;
 text-align: left;
}

And so on ?

answered Aug 29 '20 at 10:01

leogarcia

31
5

i am trying to create something in which i will have template...easy template will have lots of same data but with diffrent styling...as an example if we take a report card...each report card have same data but it have diffrent tempates.....so i want to create diffrent stylesheets for diffrent templates...now please answer. – SAWAI JAIN Aug 29 '20 at 10:20
Look at this post it seems to be what you're looking for https://stackoverflow.com/questions/28386125/dynamically-load-a-stylesheet-with-react – leogarcia Aug 31 '20 at 07:26

score 0 · Answer 2 · answered Aug 29 '20 at 10:13

You can import that CSS file as a CSS Module in the file where you have define your component.

You can learn more about CSS Module Stylesheet

just a simple example you can have a HelloWorld Component which have a stylesheet file which is scoped to it like this.

import React, { Component } from 'react';
// Here you import the CSS MODULE
import classes from './HelloWord.css';

class HelloWord extends Component {
    render() {
        return <div className={classes.HelloWord}>
            <h2 className={classes.red}>Hello World</h2>
        </div>
    }
}

and in the HelloWord.module.css you can define any css classes as you'll like\

.HelloWorld {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red {
    color: red;
}
// and so on

As you can see all classes which I have define in the HelloWorld.module.css file are available in the classes variable, with that It's up to you to decide which CSS class selector you want to apply to element in your JSX

please read the post i have updated it ..so you can understand what exactly i'm askingg? — SAWAI JAIN, Aug 29 '20 at 10:29

score 0 · Accepted Answer · answered Aug 31 '20 at 09:08

have able to add css like this..

useEffect(() => {
    var head = document.head;
    var link = document.createElement("link");

    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = process.env.PUBLIC_URL + "./styles/templates/" + templateStyle;

    head.appendChild(link);

    return () => { head.removeChild(link); }

}, [templateStyle]);

via this i can add css files dynamicaly.

Adding CSS in React file

3 Answers3