Access Office UI Fabric theme colours in JavaScript

Question

Based upon the documentation about Usage via JavaScript styling libraries , I'm trying to access the Office Fabric UI theme colours in my application. I've followed the instructions and installed @uifabric/styling . I'm then supposed to simply import the styles as

import {
  styles
} from '@uifabric/styling'; 

...to get access to the colours. But I get the following TypeScript error:

[ts] Module '"c:/.../node_modules/@uifabric/styling/lib/index"' has 
no exported member 'styles'. Did you mean 'IStyle'?

Is the documentation old or maybe the typescript definitions are old?

Any ideas?

Answer 1

How the example in the documentation is supposed to work is still an enigma for me. But I managed to get getTheme() to work together with custom styles.

Here's a quick React-Typescript example of how themes can be used in Javascript, and maybe also what the documentation should be saying. A complete theme can be created with the Theme Generator

import { getTheme, loadTheme } from '@uifabric/styling';
import * as React from 'react';

loadTheme(
  {
    palette: {
      "themePrimary": "#489958" 
    }
  }
);

class App extends React.Component {
  private theme = getTheme();

  public render() {
    return (
      <div className="App">
        <h1 style={{color: this.theme.palette.themePrimary}}>It works</h1>
      </div>
    );
  }
}

export default App;

Answer 2

you definitely found a bug in our documentation. We've recently moved most of our docs over to the wiki. I'll get this cleaned up one way or another.

Here's an issue to track the work.

https://github.com/OfficeDev/office-ui-fabric-react/issues/5770