Styling Office UI Fabric Components

Introduction

 

Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences.

With Office UI Fabric we can apply simple CSS styles to make web applications look and feel like the rest of Office 365 Applications.

To Styling an Office UI Fabric component we can use the follow approaches:

• Styles defined in SCSS file and applied with ClassName prop
• Styles applied with style prop
• Styles applied with styles prop using CSS-in-JS

Fabric’s recommended styling approach uses CSS-in-JS and revolves around the styles prop, which is provided by most Fabric components and allows strongly-typed customisations to individual areas of a component. 

 

Styling a Component

 

Unlike a style prop that only applies styles to the root component, the styles prop (provided by most Fabric components) allows you to control the styling of every part of a component: the root, the children, and even sub-components.

A component consists of DOM elements, or “areas.” Each of the areas should be targetable for styling.

To find the available areas for a component, use intellisense or look at the IComponentStyles interface of Control. (Substituting the actual component name for “Component”).

Here the TextField styles Interface as sample.

The styles can be defined in two ways – Object-based or Function-Based.

 

Object-based Styling

 

In Object-Based, we create a jscript object and define styles for each area of the component. like define above:

// Define styling, split out styles for each area.
const styles: IComponentStyles {
  root: { /* styles */ },
  child1: ['className', { /* styles */ }],
  child2: { /* styles */ }
  subComponentStyles: {
    subComponent: {
      root: { /* styles */ },
      child1: { /* styles */ },
    }
  }
}

// In render()
return <Component styles={styles} ... />;

 

Sample:

 

const theme = getTheme();
const styles = {
  root: [
    {
      background: theme.palette.themePrimary,
      display: 'none',
      selectors: {
        ':hover': {
          background: theme.palette.themeSecondary,
        },
        '&.isExpanded': {
            display: 'block'
        },
        '&:hover .childElement': {
            color: 'white' 
        }
      }
    }
  ]
};

// In render()
return <Component styles={styles} ... />;

 

Function-based Styling

 

With Function-based, the styling applied to each area may depend on the state of the component. So you should also be able to define styles as a function of these inputs:

// Take in styling input, split out styles for each area.
const styles = (props: IComponentStyleProps): IComponentStyles => {
  return {
    root: { /* styles */ },
    child1: ['className', { /* styles */ }],
    child2: ['className', props.someBoolean && { /* styles */ }],
    subComponentStyles: {
      subComponent: (subProps:ISubComponentStyleProps) => {
        const { theme, disabled, hasBoolean } = props; // parent props are available in subComponents
        const { required, hasOtherBoolean } = subProps;
        return ({
          root: { /* styles */ },
          child1: { /* styles */ },
        });
      }
    }
  };
}

// In render()
return <Component styles={styles} ... />;

 

Sample:

 

const styles = props => ({
  root: [
    {
      background: props.theme.palette.themePrimary,
      selectors: {
        ':hover': {
          background: props.theme.palette.themeSecondary,
        }
      }
    },
    props.isExpanded
      ? { display: 'block' }
      : { display: 'none' }
  ]
});

// In render()
return <Component styles={styles} ... />;

 

 

Conclusion

Using the CSS-in-JS approach to styling components is flexible and powerful if we need to styling different “areas” or sub-components of component on easy way.