Showing posts with label Dynamic Cascading Stylesheet in ReactJS. Show all posts
Showing posts with label Dynamic Cascading Stylesheet in ReactJS. Show all posts

Saturday, March 7, 2020

Dynamic Cascading Stylesheet in ReactJS

Import React and CardBody, CardText:

import React, { Component } from 'react';
import {CardBody,CardText} from 'reactstrap';


Defining Dynamic Color and other Style attributes :

var vCustomBGColorRGB = {
bgColor : {
color: "rgb(72, 127, 207)",
height: "150px",
fontSize: "11px"
}
};

Setting the Dynamica variable in State property:

this.setState({
   CustomStyler: vCustomBGColorRGB
})

Assign Style variable while Render HTML:

<CardBody>
<CardText>
<CardText style={{float:"left",color:"Blue"}}>Content Title</CardText>
</CardText>
<CardText style={this.state.CustomStyler.bgColor}>Content Data</CardText>
</CardBody>

Popular Posts