Search code examples
reactjscolorsoffice-fabric

Changing the color of Office UI Fabric React components

I am making an Office Fabric Panel in an React app, that is used as a form to create, update and delete an entity. The thing is that on the delete-panel I want the primary button to be red instead of Fabric's standard blue.

If it is possible, I am sure it is very easy, but since I am inexperienced in HTML/CSS/JS, I don't know what to do and would like a solution that uses inline CSS. I imagine that it will look something like this:

<PrimaryButton onClick={ this._onDelete } style={{marginRight: '8px', backgroundColor:'alert', color: 'white'}} >Delete</PrimaryButton>


MS's documentation doesn't help me a lot, I don't know what to import. and my good friend Google hasn't done the trick this time. I have found some answers that are close, but one is for overriding the theme of all components and another doesn't tell what to import (I guess that is the missing piece for me).

Solution 
  • import { DefaultButton } from 'office-ui-fabric-react/lib/Button';

    Then you can use the following:

    <DefaultButton
    style={{backgroundColor:'black', color:'white'}}
    text='Accept'
/>

    It's that easy :)