Change the color/theme of Office UI Fabric React components?

Question

I'm trying to use Office UI Fabric React components in my web app. Is there a way to change the color or theme of the components? For example, I tried something like this:

ReactDOM.render(
  <DefaultButton
    className='my-button'
    text='Test Button'
  />,
  document.getElementById('root')
);

my-button is a css class defined as red background color. But actually it didn't change anything. The button background color is still the default #f4f4f4 .

Is it possible at all to change the colors of the components?

[ UPDATE ] Ideally I think I want to globally change the theme of the components so my app can have a consistent look and feel.

Thanks!

Answer 1

After reading this and digging into the Office UI Fabric React source code on GitHub, I think I've found a solution. I guess probably I should have better expressed my true intention in my originally question. (Sorry about that and I've already updated the question). What I really wanted was to globally change the color of buttons (and colors of other components) based on some certain theme, rather than changing individually.

So my solution is to add the following lines before rendering the button:

import { loadTheme } from 'office-ui-fabric-react/lib/Styling';

loadTheme({
  palette: {
    'neutralPrimary': 'yellow',    // Used for button text
    'neutralLighter': 'red',       // Used for button background
  }
});

For different components, you will need to find the right color names used for different UI parts. For example, in the above code snippet, we can see ' neutralPrimary ' is used to render the button text and ' neutralLighter ' is used to render button background. I had to read the source code to figure them out. Not sure if there're easier ways.

But remember these changes are globally and will affect other components that are relying these color codes.

But still thanks to @enjoylife for the response!

Answer 2

Is it possible at all to change the colors of the components?

Yes , You just need to make sure your my-button styles have a higher specificity and will override the defaults applied.

If you use color: red !important that would of course work, but only for demonstrating that it is possible.

For something more sustainable, target your the parent component plus your button:

.parent .my-button {
  color: red;
}