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.
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';
Create your own theme using the theme generator and copy the generated code.
In exercise/src/components/TodoApp.tsx
, delete the Customizer
component.
Paste in the generated theme code before the TodoApp
component definition.
Play around with the values and use VS Code's intellisense to discover more properties of the ITheme
type.
Open exercise/src/components/TodoFooter.tsx
Find the <DefaultButton>
and insert a styles
prop
Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)
Try to customize this with a styles function
mergeStyles
As mentioned in the demo, this is an advanced approach which also works outside of Fabric. You wouldn't typically use this approach within a Fabric-based app.
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'
}
}
});