SPFx webpart component set default color

Question

I have created a tiles webpart where i am changing the color on toggle between tiles but i want to set default color for one of tiles once page load and then user can toggle

                            toggle (b)
                            {

                            if (this.state.description === b) {
                            this.setState({description : null})
                            } else {
                            this.setState({description : b})
                            }

                            }

                            myColor (b)
                            {
                            if (this.state.description === b) {
                            return "#ff9933";
                            }
                            return "";

                            }

                            {this.state.items.map((items,key)=>
                            {    
                            return(

                            <DocumentCard style={{background: this.myColor(key)}}  styles={cardStyles}   onClick={() =>{this.ShowGrid(items.GPDTemplate);this.toggle(key)}}>
                            <DocumentCardTitle   title={items.Template} />
                            <DocumentCardImage styles={cardStyles1}  height={100}imageFit={ImageFit.cover}  imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />
                            </DocumentCard>

                            );

                            })}

Answer 1

I think, here you are passing the style as a prop property for the component. That's the reason color is not visible.

Solution 1. Just pass the color-code form the master page. like

<DocumentCard style={ this.myColor(key)}

2. Apply the color-code as a background css property in the DocumentCard component of the parent div. Code like this:

   < div style={{backgroundColor:this.props.style}}>

Here this.props.style is the passing color-code.