frontend-bootcamp/step2-03/exercise

Step 2.3: Theming and styling with UI Fabric (Exercise)

Lessons | Exercise | Demo

If you don't already have the app running, start it by running npm start from the root of the frontend-bootcamp folder. Click the "exercise" link under day 2 step 3 to see results.

Fabric theming and styling

Applying Fabric themes

Try applying some predefined themes from UI Fabric packages inside the TodoApp under exercise/src/components/TodoApp.tsx. Do this by replacing:

import { FluentCustomizations } from '@uifabric/fluent-theme';

with:

import { TeamsCustomizations } from '@uifabric/theme-samples';

Applying customized themes

1. Create your own theme using the theme generator and copy the generated code.

2. In exercise/src/components/TodoApp.tsx, delete the Customizer component.

3. Paste in the generated theme code before the TodoApp component definition.

4. Play around with the values and use VS Code's intellisense to discover more properties of the ITheme type.

Customizing one Fabric control instance

1. Open exercise/src/components/TodoFooter.tsx

2. Find the <DefaultButton> and insert a styles prop

3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)

4. Try to customize this with a styles function

Advanced/non-Fabric component styling

CSS-in-JS with mergeStyles

1. Try generating a class name using mergeStyles and use it as a className prop inside TodoApp

import { mergeStyles } from 'office-ui-fabric-react';

const className = mergeStyles({
  backgroundColor: 'red',
  selectors: {
    ':hover': {
      backgroundColor: 'blue'
    }
  }
});

2. Try to give a few components extra padding