microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Day 2: title formatting coherence, minor edits

Browse Source
This commit is contained in:
Elizabeth Craig
2019-03-05 02:42:26 -08:00
parent 8c99c83353
commit 46094abe9d
11 changed files with 40 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
step2-03/demo/README.md
View File

@@ -1,4 +1,4 @@
# Step 2.3: Theming and styling with UI Fabric (Demo)
# Step 2.3 - Theming and styling with UI Fabric (Demo)
[Lessons](../../) | [Exercise](../exercise/)

14
step2-03/exercise/README.md
View File

@@ -1,12 +1,10 @@
# Step 2.3: Theming and styling with UI Fabric (Exercise)
# Step 2.3 - Theming and styling with UI Fabric (Exercise)
[Lessons](../../) | [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
## 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:
@@ -20,7 +18,7 @@ with:
import { TeamsCustomizations } from '@uifabric/theme-samples';
```
### Applying customized themes
## 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.
@@ -30,7 +28,7 @@ import { TeamsCustomizations } from '@uifabric/theme-samples';
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
## Customizing one Fabric control instance
1. Open `exercise/src/components/TodoFooter.tsx`
@@ -40,9 +38,9 @@ import { TeamsCustomizations } from '@uifabric/theme-samples';
4. Try to customize this with a styles function
## Advanced/non-Fabric component styling
## CSS-in-JS with `mergeStyles`
### CSS-in-JS with `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.
1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`