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 '19 at 8:51
  • Could you try the below solution. I think it will work for you. – Palash Kanti Bachar Nov 25 '19 at 7:36

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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