mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
63 lines
1.8 KiB
Markdown
63 lines
1.8 KiB
Markdown
# Step 2.3: Theming and styling with UI Fabric (Exercise)
|
|
|
|
[Lessons](../) | [Exercise](./exercise/) | [Demo](./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:
|
|
|
|
```ts
|
|
import { FluentCustomizations } from '@uifabric/fluent-theme';
|
|
```
|
|
|
|
with:
|
|
|
|
```ts
|
|
import { TeamsCustomizations } from '@uifabric/theme-samples';
|
|
```
|
|
|
|
### Applying customized themes
|
|
|
|
1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) 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`
|
|
|
|
```tsx
|
|
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
|