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>

No comments:

Post a Comment

Popular Posts