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 "";



                            <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"] : ''} />


  • tried using style={{ backgroundColor: (Key == 1) ? '#ecf0f1' : '#fff' }} but then color does not change on toggle it remain same
    – kumar
    Nov 24, 2019 at 8:51
  • Could you try the below solution. I think it will work for you. Nov 25, 2019 at 7:36

1 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)}
  1. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.