CODEWITHSUNDEEP
office-ui-fabric
VSOS
VSOS

Reputation: 594

Styling Microsoft fabric-react components

I've started a Microsoft fabric-react, using the Typescript-React-Started provided by Microsoft here.

Although the excellent Fabric-react documentation available here, i wasn't able to find any documentation on how to style the fabric-react components.

For example, the Microsoft documentation for the Commandbar component is available here.

The default theme renders the Commandbar background with a gray color, with blue command buttons.

From what i could understand, Microsoft provides a Themes/Styling system. Unfortunately, i wasn't able to find any start-to-end example, on how to change the default theme, or create a custom theme.

So, my questions are:

  1. How can i change the default theme, and apply a specific theme on a fabric-react component?
  2. How can i create a custom theme?

Upvotes: 4

Views: 6798

Answers (2)

VSOS
VSOS

Reputation: 594

This is a copy of Microsoft response on Github, so the merit is not mine :)

Current

  1. Use loadTheme to provide component wide colors and fonts.
  2. Use styles prop for components for one-off tweaks.
  3. If you'd like to provide a standard styles override for a specific component type, you can use Customizer to provide scopedSettings to pipe in standard overrides. (Not this is experimental and will likely change.)
  4. Legacy className / global css support still works, which is to use className to provide your own class overrides, and to reference global class names as needed. Though this is an option, this is is not recommended, as it's very fragile and suffers from numerous issues (selector specificity, no build time validation, easy to break, etc.) We're considering removing the global class names completely in a future major release.

In progress

Our goal is to move all customization into the theme; this lets you rev your design over time. We are tracking a bunch of work here: https://github.com/OfficeDev/office-ui-fabric-react/projects/26

The problems we've recognized

  1. Customizer for providing contextual overrides is too generalized, and doesn't allow us to have theme-specific logic like caching themes.
  2. ITheme should be expanded to allow you to pipe in component-specific overrides, in addition to other site-wide settings like sizing, shadowing, and animations.
  3. Passing in styles is not a good contract; you need to know which component parts to target for the styling (sometimes multiple parts) and sometimes which selectors to override (do i use a pseudo element here? is my selector not specific enough?)
  4. No support for color schemes (think the "dark header", where the Toggle should look different than in the "light content area".

Solutions to shortcomings

  1. Expose a dedicated ThemeProvider component. We will still have loadTheme for providing the default theme, while ThemeProvider can switch out scheme, or even theme in a box.
  2. Add support for color schemes.
  3. Introduce style variables, which abstract the common knobs from full styles definitions. This lets you not worry about parts or selectors, and simply focus abstractly on what the component should look like. We have this experimentally in our Button and Toggle refactors in experiments.

Upvotes: 1

kevintcoughlin
kevintcoughlin

Reputation: 482

Thanks for using Office UI Fabric React! Have you had a chance to read these wiki pages regarding styling and applying a theme to components?

You can also generate your theme via https://developer.microsoft.com/en-us/fabric#/styles/themegenerator then apply it using the method described in the page(s) above.

Upvotes: 3

Related Questions