diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json
index 44c03471a8b54..28d4131a6c0f5 100644
--- a/apps/todo-app/package.json
+++ b/apps/todo-app/package.json
@@ -23,7 +23,7 @@
     "office-ui-fabric-react": ">=6.33.1 <7.0.0",
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",
-    "typescript": "2.8.1",
+    "typescript": "2.9.2",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 64e4d36bc5ebb..9ec2799e881f4 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -32,7 +32,7 @@
     "office-ui-fabric-react": ">=6.33.1 <7.0.0",
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",
-    "typescript": "2.8.1",
+    "typescript": "2.9.2",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json b/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json
new file mode 100644
index 0000000000000..80aa1bf6ea869
--- /dev/null
+++ b/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/charting",
+      "comment": "Update typings to not use deprecated types.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/charting",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json b/common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json
new file mode 100644
index 0000000000000..808ce47c96a9c
--- /dev/null
+++ b/common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/example-app-base",
+      "comment": "Fix typing bugs in example-app-base",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/example-app-base",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json b/common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json
new file mode 100644
index 0000000000000..2a7a10a375136
--- /dev/null
+++ b/common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Fix typing errors",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
new file mode 100644
index 0000000000000..ac9d953d69cca
--- /dev/null
+++ b/common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Add support for style functions and improve documentation/typings.",
+      "packageName": "@uifabric/merge-styles",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
new file mode 100644
index 0000000000000..8d36f5e6a76c3
--- /dev/null
+++ b/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "Move certain types into `@uifabric/merge-styles` and export more types as well from that package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
new file mode 100644
index 0000000000000..538061f09bc15
--- /dev/null
+++ b/common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Tighten typings of APIs around merge-styles to be more correct",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
new file mode 100644
index 0000000000000..50812b99e4d05
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix various typings/code bugs.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json
index 4eaef0537bf37..2be337400fddf 100644
--- a/common/config/rush/npm-shrinkwrap.json
+++ b/common/config/rush/npm-shrinkwrap.json
@@ -120,7 +120,7 @@
     },
     "@rush-temp/build": {
       "version": "file:projects/build.tgz",
-      "integrity": "sha1-l1+IBVCYHDwmwYWRdXnFaH8Da7Q=",
+      "integrity": "sha1-7nNADNdCDUOYEK7P95wu1a6ovqI=",
       "requires": {
         "@microsoft/api-extractor": "4.3.7",
         "@microsoft/load-themed-styles": "1.7.67",
@@ -154,7 +154,7 @@
         "ts-loader": "4.4.2",
         "tslint": "5.10.0",
         "tslint-microsoft-contrib": "5.0.3",
-        "typescript": "2.8.1",
+        "typescript": "2.9.2",
         "webpack": "4.7.0",
         "webpack-bundle-analyzer": "2.13.1",
         "webpack-cli": "2.1.2",
@@ -574,7 +574,7 @@
             "ajv-keywords": "3.2.0",
             "chrome-trace-event": "0.1.3",
             "enhanced-resolve": "4.1.0",
-            "eslint-scope": "3.7.1",
+            "eslint-scope": "3.7.3",
             "loader-runner": "2.3.0",
             "loader-utils": "1.1.0",
             "memory-fs": "0.4.1",
@@ -724,7 +724,7 @@
     },
     "@rush-temp/charting": {
       "version": "file:projects/charting.tgz",
-      "integrity": "sha1-ShC64ZDuf9GUHygInJvIWFDwm2M=",
+      "integrity": "sha1-7plY69bt898pYyM2hgEikQA8VlY=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/d3-array": "1.2.1",
@@ -761,7 +761,7 @@
     },
     "@rush-temp/dashboard": {
       "version": "file:projects/dashboard.tgz",
-      "integrity": "sha1-Cr//JoSgq1PgcWbnLCnmgwup61c=",
+      "integrity": "sha1-grpPJvo7rf1hB8+mY5u3EMyAqMM=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/jest": "23.0.0",
@@ -1138,7 +1138,7 @@
     },
     "@rush-temp/example-app-base": {
       "version": "file:projects/example-app-base.tgz",
-      "integrity": "sha1-gfS6gU3SJWgoI2whNki9vzGMD2I=",
+      "integrity": "sha1-tDbrk37rIxC4DWSjfBDG2bH1vV4=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/es6-promise": "0.0.32",
@@ -1159,7 +1159,7 @@
     },
     "@rush-temp/experiments": {
       "version": "file:projects/experiments.tgz",
-      "integrity": "sha1-/TbYyOb/Bni0t2/Jx1ug2dcoNbQ=",
+      "integrity": "sha1-UUxvYKga2EkQANh558iFt+Ip0aA=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/deep-assign": "0.1.1",
@@ -1190,7 +1190,7 @@
     },
     "@rush-temp/fabric-website": {
       "version": "file:projects/fabric-website.tgz",
-      "integrity": "sha1-L2AP7eF0U5jtRD7C0kICaj0Z4Fc=",
+      "integrity": "sha1-aakJ1EdXy0MthScJw7v+FWclM/c=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/es6-promise": "0.0.32",
@@ -1215,7 +1215,7 @@
     },
     "@rush-temp/fabric-website-resources": {
       "version": "file:projects/fabric-website-resources.tgz",
-      "integrity": "sha1-emAqESk+8q6Jqh2sFwQtNbNkp1g=",
+      "integrity": "sha1-qcAuWOA8jD5LYahq9eOd7He/Gns=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/enzyme": "3.1.5",
@@ -1249,7 +1249,7 @@
     },
     "@rush-temp/file-type-icons": {
       "version": "file:projects/file-type-icons.tgz",
-      "integrity": "sha1-cKKUhalUpkpGWxd0CzvI733BWVw=",
+      "integrity": "sha1-/e3vd142DyFeyDOA6mwgn6Htkbw=",
       "requires": {
         "@types/react": "16.3.16",
         "@types/react-dom": "16.0.5",
@@ -1260,7 +1260,7 @@
     },
     "@rush-temp/foundation": {
       "version": "file:projects/foundation.tgz",
-      "integrity": "sha1-EoE7LqNF9106KPQyk/bcfHcNvZ0=",
+      "integrity": "sha1-6Mt/FE75C7z+FOWZSK2sO2s/2uE=",
       "requires": {
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
@@ -1280,21 +1280,21 @@
     },
     "@rush-temp/icons": {
       "version": "file:projects/icons.tgz",
-      "integrity": "sha1-aKF/WDdjJFvRGiWKO9+quVGKTl0=",
+      "integrity": "sha1-9jhEnL2VeMqVS6L/K6PBB+6j580=",
       "requires": {
         "tslib": "1.9.3"
       }
     },
     "@rush-temp/jest-serializer-merge-styles": {
       "version": "file:projects/jest-serializer-merge-styles.tgz",
-      "integrity": "sha1-X+50/gOVqZsH7ovZF6s/KMMv8uA=",
+      "integrity": "sha1-M4GtZh/zldj1TbB6EQYR5s63iXw=",
       "requires": {
         "@types/jest": "23.0.0"
       }
     },
     "@rush-temp/merge-styles": {
       "version": "file:projects/merge-styles.tgz",
-      "integrity": "sha1-FujuDVXx6u9hkZh4TI9ijuQLVa8=",
+      "integrity": "sha1-5skgc2NhWeJsF4mHhq4/VOxCFBw=",
       "requires": {
         "@types/jest": "23.0.0",
         "tslib": "1.9.3"
@@ -1302,7 +1302,7 @@
     },
     "@rush-temp/office-ui-fabric-react": {
       "version": "file:projects/office-ui-fabric-react.tgz",
-      "integrity": "sha1-dHmiEDF60AzwpsJ5VP2BqEFK6vA=",
+      "integrity": "sha1-dCWYPTWLxDiybcKjcrhe1+tycJ0=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/enzyme": "3.1.5",
@@ -1336,14 +1336,14 @@
     },
     "@rush-temp/office-ui-fabric-react-tslint": {
       "version": "file:projects/office-ui-fabric-react-tslint.tgz",
-      "integrity": "sha1-c/OLOp8QZIwOn+WR2dIzo4js18Y=",
+      "integrity": "sha1-Qa0alsKG5DaDkaP+vdqxnL5liX0=",
       "requires": {
         "tslint-react": "3.6.0"
       }
     },
     "@rush-temp/server-rendered-app": {
       "version": "file:projects/server-rendered-app.tgz",
-      "integrity": "sha1-UYrKC/NE3JgXjnarEopG92iwqCM=",
+      "integrity": "sha1-d+KDbBSiBFzskkpKT3tmzBx82rk=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/es6-promise": "0.0.32",
@@ -1361,7 +1361,7 @@
     },
     "@rush-temp/ssr-tests": {
       "version": "file:projects/ssr-tests.tgz",
-      "integrity": "sha1-EVrtzzKbokwr/bdWr8xY9YdB8no=",
+      "integrity": "sha1-G7fkR0Dx5eDAv8fgGuqL6TjI0Tk=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/es6-promise": "0.0.32",
@@ -1677,7 +1677,7 @@
             "ajv-keywords": "3.2.0",
             "chrome-trace-event": "1.0.0",
             "enhanced-resolve": "4.1.0",
-            "eslint-scope": "3.7.1",
+            "eslint-scope": "3.7.3",
             "json-parse-better-errors": "1.0.2",
             "loader-runner": "2.3.0",
             "loader-utils": "1.1.0",
@@ -1697,7 +1697,7 @@
     },
     "@rush-temp/styling": {
       "version": "file:projects/styling.tgz",
-      "integrity": "sha1-hEdDiPg7IZ4UnVuEYjr9qdbzGtY=",
+      "integrity": "sha1-1PcFTNBQYsUgpbcjjHHlYzZQ89o=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/jest": "23.0.0",
@@ -1712,7 +1712,7 @@
     },
     "@rush-temp/test-bundle-button": {
       "version": "file:projects/test-bundle-button.tgz",
-      "integrity": "sha1-jMNGE5bcMnmNT+Lkebmm2MyuWWI=",
+      "integrity": "sha1-L8nMS9PRUA9BMJVMfwlgA/voIJ8=",
       "requires": {
         "@types/prop-types": "15.5.2",
         "@types/react": "16.3.16",
@@ -1725,7 +1725,7 @@
     },
     "@rush-temp/todo-app": {
       "version": "file:projects/todo-app.tgz",
-      "integrity": "sha1-XFm3Jnp7mCDQ13O84c4YZWJvFiE=",
+      "integrity": "sha1-7oCrL0W3xlPNR4J56SxxSHC6zg0=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.67",
         "@types/es6-promise": "0.0.32",
@@ -1737,12 +1737,12 @@
         "react": "16.4.1",
         "react-dom": "16.4.1",
         "tslib": "1.9.3",
-        "typescript": "2.8.1"
+        "typescript": "2.9.2"
       }
     },
     "@rush-temp/utilities": {
       "version": "file:projects/utilities.tgz",
-      "integrity": "sha1-pIMgyhoqaIzBhFEFKHHvr2hKhdc=",
+      "integrity": "sha1-LZFqwQgkhd19P4OmgfESVM9WKCA=",
       "requires": {
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
@@ -1764,7 +1764,7 @@
     },
     "@rush-temp/variants": {
       "version": "file:projects/variants.tgz",
-      "integrity": "sha1-ufqfvfmzeKEj8yLFf8SnKXJyMNw=",
+      "integrity": "sha1-WV4N2Oy24uLlvpk9UmYjN6DskOs=",
       "requires": {
         "@types/jest": "23.0.0",
         "tslib": "1.9.3"
@@ -1772,7 +1772,7 @@
     },
     "@rush-temp/vr-tests": {
       "version": "file:projects/vr-tests.tgz",
-      "integrity": "sha1-+IwCyFG8vGXZZoKVAV2ZbWZdTAg=",
+      "integrity": "sha1-gEmAr7X1dBEs5WG8lWB9xkJ0KBQ=",
       "requires": {
         "@storybook/addon-options": "3.2.3",
         "@storybook/react": "3.4.8",
@@ -1791,12 +1791,12 @@
         "storybook-readme": "3.0.6",
         "style-loader": "0.19.1",
         "tslib": "1.9.3",
-        "typescript": "2.8.1"
+        "typescript": "2.9.2"
       }
     },
     "@rush-temp/webpack-utils": {
       "version": "file:projects/webpack-utils.tgz",
-      "integrity": "sha1-SASqIOi0eX/2Ye50pTk6DOiwKy8=",
+      "integrity": "sha1-pk9SHUaiJb5oHC4o8Rp/vKBSBkI=",
       "requires": {
         "@types/jest": "23.0.0",
         "@types/loader-utils": "1.1.3",
@@ -2107,7 +2107,7 @@
             "ajv-keywords": "3.2.0",
             "chrome-trace-event": "1.0.0",
             "enhanced-resolve": "4.1.0",
-            "eslint-scope": "3.7.1",
+            "eslint-scope": "3.7.3",
             "json-parse-better-errors": "1.0.2",
             "loader-runner": "2.3.0",
             "loader-utils": "1.1.0",
@@ -6369,7 +6369,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -6591,7 +6591,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -7572,9 +7572,9 @@
       }
     },
     "eslint-scope": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
-      "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.3.tgz",
+      "integrity": "sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==",
       "requires": {
         "esrecurse": "4.2.1",
         "estraverse": "4.2.0"
@@ -10890,9 +10890,9 @@
       }
     },
     "js-base64": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.5.tgz",
-      "integrity": "sha512-aUnNwqMOXw3yvErjMPSQu6qIIzUmT1e5KcU1OZxRDU1g/am6mzBvcrmLAYwzmB59BHPrh5/tKaiF4OPhqRWESQ=="
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.6.tgz",
+      "integrity": "sha512-O9SR2NVICx6rCqh1qsU91QZ5IoNa+2T1ROJ0OQlfvATKGmnjsAvg3r0E5ufPZ4a95jdKTPXhFWiE/sOZ7a5Rtg=="
     },
     "js-tokens": {
       "version": "3.0.2",
@@ -13487,7 +13487,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13552,7 +13552,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13616,7 +13616,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13679,7 +13679,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13742,7 +13742,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13805,7 +13805,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13868,7 +13868,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13932,7 +13932,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13995,7 +13995,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14133,7 +14133,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14196,7 +14196,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14272,7 +14272,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14342,7 +14342,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14444,7 +14444,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14510,7 +14510,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14576,7 +14576,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14685,7 +14685,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14751,7 +14751,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14815,7 +14815,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14879,7 +14879,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14942,7 +14942,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15007,7 +15007,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15132,7 +15132,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15197,7 +15197,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15267,7 +15267,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.5",
+            "js-base64": "2.4.6",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -17912,7 +17912,7 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
       "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
       "requires": {
-        "js-base64": "2.4.5",
+        "js-base64": "2.4.6",
         "source-map": "0.4.4"
       },
       "dependencies": {
@@ -18208,7 +18208,7 @@
         "map-cache": "0.2.2",
         "source-map": "0.5.7",
         "source-map-resolve": "0.5.2",
-        "use": "3.1.0"
+        "use": "3.1.1"
       },
       "dependencies": {
         "debug": {
@@ -20108,9 +20108,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.1.tgz",
-      "integrity": "sha512-Ao/f6d/4EPLq0YwzsQz8iXflezpTkQzqAyenTiw4kCUGr1uPiFLC3+fZ+gMZz6eeI/qdRUqvC+HxIJzUAzEFdg=="
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+      "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w=="
     },
     "typical": {
       "version": "2.6.1",
@@ -20381,19 +20381,9 @@
       "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k="
     },
     "use": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/use/-/use-3.1.0.tgz",
-      "integrity": "sha512-6UJEQM/L+mzC3ZJNM56Q4DFGLX/evKGRg15UJHGB9X5j5Z3AFbgZvjUh2yq/UJUY4U5dh7Fal++XbNg1uzpRAw==",
-      "requires": {
-        "kind-of": "6.0.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
-        }
-      }
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
     "util": {
       "version": "0.10.4",
diff --git a/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index 7dd9e23076a05..d9c39048772a4 100644
--- a/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -3,7 +3,8 @@ import { max as d3Max } from 'd3-array';
 import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis';
 import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear } from 'd3-scale';
 import { select as d3Select } from 'd3-selection';
-import { classNamesFunction, IClassNames } from '../../Utilities';
+import { classNamesFunction } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import {
   IHorizontalBarChartProps,
   IHorizontalBarChartStyleProps,
@@ -24,7 +25,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     yAxisTickCount: 10
   };
   private _colors: string[];
-  private _classNames: IClassNames<IHorizontalBarChartStyles>;
+  private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;
   constructor(props: IHorizontalBarChartProps) {
     super(props);
 
diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index 6ff6a30f0f2f8..f833d5f521cce 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -3,7 +3,8 @@ import { max as d3Max } from 'd3-array';
 import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis';
 import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { select as d3Select } from 'd3-selection';
-import { classNamesFunction, customizable, IClassNames } from '../../Utilities';
+import { classNamesFunction, customizable } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { ILineChartProps, ILineChartStyleProps, ILineChartStyles, IDataPoint } from './LineChart.types';
 
 const getClassNames = classNamesFunction<ILineChartStyleProps, ILineChartStyles>();
@@ -19,7 +20,7 @@ export class LineChartBase extends React.Component<ILineChartProps, {}> {
   private _strokeWidth: number;
   private _yAxisTickCount: number;
   private _color: string;
-  private _classNames: IClassNames<ILineChartStyles>;
+  private _classNames: IProcessedStyleSet<ILineChartStyles>;
 
   constructor(props: ILineChartProps) {
     super(props);
diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
index 786d7f213936c..48b78f84ad9d3 100644
--- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
+++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -3,7 +3,9 @@ import { max as d3Max } from 'd3-array';
 import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis';
 import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear } from 'd3-scale';
 import { select as d3Select } from 'd3-selection';
-import { classNamesFunction, customizable, IClassNames } from '../../Utilities';
+import { classNamesFunction, customizable } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
+
 import {
   IVerticalBarChartProps,
   IVerticalBarChartStyleProps,
@@ -23,7 +25,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
   private _barWidth: number;
   private _yAxisTickCount: number;
   private _colors: string[];
-  private _classNames: IClassNames<IVerticalBarChartStyles>;
+  private _classNames: IProcessedStyleSet<IVerticalBarChartStyles>;
 
   constructor(props: IVerticalBarChartProps) {
     super(props);
diff --git a/packages/example-app-base/src/components/templates/PageContent.tsx b/packages/example-app-base/src/components/templates/PageContent.tsx
index d554a3a461f9b..a6be4acba1719 100644
--- a/packages/example-app-base/src/components/templates/PageContent.tsx
+++ b/packages/example-app-base/src/components/templates/PageContent.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BaseComponent, IBaseProps, IClassNames, customizable } from 'office-ui-fabric-react/lib/Utilities';
-import { ITheme, IStyle, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { BaseComponent, IBaseProps, customizable } from 'office-ui-fabric-react/lib/Utilities';
+import { ITheme, IStyle, mergeStyleSets, IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling';
 
 export interface IPageContentProps extends React.Props<PageContent>, IBaseProps {
   theme?: ITheme;
@@ -20,7 +20,7 @@ const getDefaultStyles = (props: IPageContentProps): IPageContentStyles => ({
 export class PageContent extends BaseComponent<IPageContentProps, {}> {
   public render(): JSX.Element {
     const { children } = this.props;
-    const classNames: IClassNames<IPageContentStyles> = mergeStyleSets(getDefaultStyles(this.props));
+    const classNames: IProcessedStyleSet<IPageContentStyles> = mergeStyleSets(getDefaultStyles(this.props));
 
     return <div className={classNames.root}>{children}</div>;
   }
diff --git a/packages/example-app-base/src/components/templates/PageExampleCard.tsx b/packages/example-app-base/src/components/templates/PageExampleCard.tsx
index 3ec768aff6592..2019a1b51f84c 100644
--- a/packages/example-app-base/src/components/templates/PageExampleCard.tsx
+++ b/packages/example-app-base/src/components/templates/PageExampleCard.tsx
@@ -1,5 +1,5 @@
-import { BaseComponent, IBaseProps, IClassNames, autobind, customizable } from 'office-ui-fabric-react/lib/Utilities';
-import { ITheme, IStyle, mergeStyleSets, getFocusStyle } from 'office-ui-fabric-react/lib/Styling';
+import { BaseComponent, IBaseProps, autobind, customizable } from 'office-ui-fabric-react/lib/Utilities';
+import { ITheme, IStyle, mergeStyleSets, getFocusStyle, IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling';
 import * as React from 'react';
 import { TypeScriptSnippet } from './TypeScriptSnippet';
 import { PageHeader } from './PageHeader';
@@ -79,7 +79,7 @@ export class PageExampleCard extends BaseComponent<IPageExampleCardProps, IPageE
     const { children, theme, code, title } = this.props;
     const { expanded } = this.state;
     const styleProps: IPageExampleCardStyleProps = { theme: theme! };
-    const classNames: IClassNames<IPageExampleCardStyles> = mergeStyleSets(getDefaultStyles(styleProps));
+    const classNames: IProcessedStyleSet<IPageExampleCardStyles> = mergeStyleSets(getDefaultStyles(styleProps));
 
     return (
       <div className={classNames.root}>
diff --git a/packages/example-app-base/src/components/templates/PageHeader.base.tsx b/packages/example-app-base/src/components/templates/PageHeader.base.tsx
index 19da679e07365..5a68c970e7898 100644
--- a/packages/example-app-base/src/components/templates/PageHeader.base.tsx
+++ b/packages/example-app-base/src/components/templates/PageHeader.base.tsx
@@ -8,7 +8,8 @@ export class PageHeaderBase extends BaseComponent<IPageHeaderProps, {}> {
   public render(): JSX.Element {
     const { theme, children, getStyles } = this.props;
     const stylesProps: IPageHeaderStylesProps = { theme: theme! };
-    const classNames: IClassNames<IPageHeaderStyles> = mergeStyleSets(getStyles && getStyles(stylesProps));
+
+    const classNames = getStyles ? mergeStyleSets(getStyles(stylesProps)) : { root: '' };
 
     return <h2 className={classNames.root}>{children}</h2>;
   }
diff --git a/packages/example-app-base/src/components/templates/PageImageSet.tsx b/packages/example-app-base/src/components/templates/PageImageSet.tsx
index 24c57e59966c0..8cb6a028f421f 100644
--- a/packages/example-app-base/src/components/templates/PageImageSet.tsx
+++ b/packages/example-app-base/src/components/templates/PageImageSet.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseComponent, IBaseProps, IClassNames, customizable } from 'office-ui-fabric-react/lib/Utilities';
-import { ITheme, IStyle, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { ITheme, IStyle, mergeStyleSets, IStyleSet } from 'office-ui-fabric-react/lib/Styling';
 import { IImageProps } from 'office-ui-fabric-react/lib/Image';
 
 export interface IPageImageSetStyles {
@@ -20,7 +20,7 @@ export interface IPageImageSetProps extends React.Props<PageImageSet>, IBaseProp
   images: IImageProps[];
 }
 
-const getDefaultStyles = (props: IPageImageSetStyleProps): IPageImageSetStyles => ({
+const getDefaultStyles = (props: IPageImageSetStyleProps): IStyleSet<IPageImageSetStyles> => ({
   root: {
     display: 'flex',
     flexFlow: 'row nowrap',
@@ -41,10 +41,9 @@ export class PageImageSet extends BaseComponent<IPageImageSetProps, {}> {
   public render(): JSX.Element {
     const { theme, getStyles, images } = this.props;
     const styleProps: IPageImageSetStyleProps = { theme: theme! };
-    const classNames: IClassNames<IPageImageSetStyles> = mergeStyleSets(
-      getDefaultStyles(styleProps),
-      getStyles && getStyles(styleProps)
-    );
+    const classNames = getStyles
+      ? mergeStyleSets(getDefaultStyles(styleProps), getStyles(styleProps))
+      : mergeStyleSets(getDefaultStyles(styleProps));
 
     return (
       <div className={classNames.root}>
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
index 4f7649d88ea5f..dafd07563ea34 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerCircle-root',
@@ -12,7 +12,7 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
+  const styles: IStyle = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
index e47b75731a261..3ae075e12dcb5 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
+import { IStyle, ITheme } from '../../../Styling';
 import { IStyleFunctionOrObject } from '../../../Utilities';
 
 export interface IShimmerCircle {}
@@ -23,7 +23,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
   /**
    * Used to
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -38,7 +38,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
 
 export interface IShimmerCircleStyleProps {
   height?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
   theme: ITheme;
 }
 
diff --git a/packages/experiments/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx b/packages/experiments/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
index 2264b86f6353e..cd653e4973e1a 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
@@ -5,7 +5,7 @@ import {
   IShimmerElementsGroupStyleProps,
   IShimmerElementsGroupStyles
 } from './ShimmerElementsGroup.types';
-import { IStyleSet } from '../../../Styling';
+import { IStyle } from '../../../Styling';
 import {
   ShimmerElementType,
   ShimmerElementVerticalAlign,
@@ -68,11 +68,11 @@ export class ShimmerElementsGroupBase extends BaseComponent<IShimmerElementsGrou
     return renderedElements;
   };
 
-  private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IStyleSet | undefined => {
+  private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IStyle | undefined => {
     const elemHeight: number | undefined = elem.height;
     const dif: number = rowHeight && elemHeight ? rowHeight - elemHeight : 0;
 
-    let borderStyle: IStyleSet | undefined;
+    let borderStyle: IStyle | undefined;
 
     if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.center) {
       borderStyle = {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
index 53fa12b8effcd..6babe29cfe79c 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerGap-root'
@@ -11,7 +11,7 @@ export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
+  const styles: IStyle = !!borderStyle ? borderStyle : {};
   const ACTUAL_WIDTH = widthInPercentage ? widthInPercentage + '%' : widthInPixel ? widthInPixel + 'px' : '10px';
 
   return {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
index 89898af096ba5..8aec1ca2493d7 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
+import { IStyle, ITheme } from '../../../Styling';
 import { IStyleFunctionOrObject } from '../../../Utilities';
 
 export interface IShimmerGap {}
@@ -35,7 +35,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {
   /**
    * Sets custom styling of the gap.
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -52,7 +52,7 @@ export interface IShimmerGapStyleProps {
   height?: number;
   widthInPercentage?: number;
   widthInPixel?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
   theme: ITheme;
 }
 
diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
index 3c35fe1d81cfc..84ee7062ad5b5 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerLine-root',
@@ -15,10 +15,10 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : { borderWidth: '0px' };
+  const styles: IStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' };
   const ACTUAL_WIDTH = widthInPercentage ? widthInPercentage + '%' : widthInPixel ? widthInPixel + 'px' : '100%';
 
-  const sharedCornerStyles: IStyleSet = {
+  const sharedCornerStyles: IStyle = {
     position: 'absolute',
     fill: palette.white
   };
diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
index f7f2986d9cb33..d049b129af1de 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
+import { IStyle, ITheme } from '../../../Styling';
 import { IStyleFunctionOrObject } from '../../../Utilities';
 
 export interface IShimmerLine {}
@@ -35,7 +35,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement>
   /**
    * Sets custom styling of the rectangle.
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -52,7 +52,7 @@ export interface IShimmerLineStyleProps {
   height?: number;
   widthInPercentage?: number;
   widthInPixel?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
   theme: ITheme;
 }
 
diff --git a/packages/experiments/src/components/Text/createComponent.tsx b/packages/experiments/src/components/Text/createComponent.tsx
index 756d0666c327d..9914eddfff696 100644
--- a/packages/experiments/src/components/Text/createComponent.tsx
+++ b/packages/experiments/src/components/Text/createComponent.tsx
@@ -1,16 +1,16 @@
-import { IClassNames, IStyleFunction, mergeStyleSets } from 'office-ui-fabric-react';
+import { IClassNames, IStyleFunction, mergeStyleSets, IStyleSet } from 'office-ui-fabric-react';
 import * as React from 'react';
 import { ITheme } from './theming/ITheme';
 import { ThemeConsumer } from './theming/ThemeProvider';
 
 export type IStyleFunction<TProps, TStyles> = (props: TProps) => Partial<TStyles>;
 
-export interface IPropsWithStyles<TProps, TStyles> {
+export interface IPropsWithStyles<TProps, TStyles extends IStyleSet<TStyles>> {
   styles?: IStyleFunction<TProps, TStyles> | Partial<TStyles>;
 }
 
 // Components should accept styling.
-export type IComponentProps<TProps, TStyles> = TProps & {
+export type IComponentProps<TProps, TStyles extends IStyleSet<TStyles>> = TProps & {
   styles?: IStyleFunction<IPropsWithStyles<TProps, TStyles>, TStyles> | Partial<TStyles>;
 };
 
@@ -26,7 +26,7 @@ export type IViewProps<TProps, TStyles> = TProps & {
 // tslint:disable-next-line:no-any
 const augmentations: any = {};
 
-export interface IComponentOptions<TProps, TStyles, TStatics> {
+export interface IComponentOptions<TProps, TStyles extends IStyleSet<TStyles>, TStatics> {
   displayName: string;
   state?: React.ComponentType<IComponentProps<TProps, TStyles>>;
   styles?: IStyleFunction<IStyleProps<TProps, TStyles>, TStyles> | Partial<TStyles>;
@@ -34,7 +34,7 @@ export interface IComponentOptions<TProps, TStyles, TStatics> {
   statics?: TStatics;
 }
 
-function evaluateStyle<TProps, TStyles>(
+function evaluateStyle<TProps, TStyles extends IStyleSet<TStyles>>(
   props: TProps,
   styles?: IStyleFunction<TProps, TStyles> | Partial<TStyles> | undefined
 ): Partial<TStyles> | undefined {
@@ -46,7 +46,7 @@ function evaluateStyle<TProps, TStyles>(
 }
 
 // Helper function to tie them together.
-export function createComponent<TProps, TStyles, TStatics = {}>(
+export function createComponent<TProps, TStyles extends IStyleSet<TStyles>, TStatics = {}>(
   options: IComponentOptions<TProps, TStyles, TStatics>
 ): React.StatelessComponent<IComponentProps<TProps, TStyles>> & TStatics {
   const result: React.StatelessComponent<TProps> = (userProps: TProps) => {
@@ -65,13 +65,15 @@ export function createComponent<TProps, TStyles, TStatics = {}>(
           {(theme: ITheme) => {
             const styleProps = { theme, ...(processedProps as {}) };
 
+            const styleSets: Array<TStyles> = [
+              evaluateStyle(styleProps, componentStyles),
+              // tslint:disable-next-line:no-any
+              evaluateStyle(styleProps, styles as any)
+            ].filter((elem: Partial<TStyles> | undefined) => !!elem) as Array<TStyles>;
+
             return ComponentView({
               ...(processedProps as {}),
-              classNames: mergeStyleSets(
-                evaluateStyle(styleProps, componentStyles),
-                // tslint:disable-next-line:no-any
-                evaluateStyle(styleProps, styles as any)
-              )
+              classNames: mergeStyleSets(...styleSets)
             });
           }}
         </ThemeConsumer>
@@ -91,7 +93,7 @@ export function createComponent<TProps, TStyles, TStatics = {}>(
 }
 
 // Helper function to augment existing components that have been created.
-export function augmentComponent<TProps, TStyles, TStatics>(
+export function augmentComponent<TProps, TStyles extends IStyleSet<TStyles>, TStatics>(
   options: IComponentOptions<TProps, TStyles, TStatics>
 ): void {
   augmentations[options.displayName] = {
diff --git a/packages/merge-styles/src/IStyle.ts b/packages/merge-styles/src/IStyle.ts
index 5fc3c158746f4..7735148a929e0 100644
--- a/packages/merge-styles/src/IStyle.ts
+++ b/packages/merge-styles/src/IStyle.ts
@@ -20,7 +20,6 @@ export interface IRawStyle extends IRawStyleBase {
 }
 
 export type IStyleBase = IRawStyle | string | false | null | undefined;
-
 export interface IStyleBaseArray extends Array<IStyle> {}
 
 /**
diff --git a/packages/merge-styles/src/IStyleFunction.ts b/packages/merge-styles/src/IStyleFunction.ts
new file mode 100644
index 0000000000000..38bc5bcd1254a
--- /dev/null
+++ b/packages/merge-styles/src/IStyleFunction.ts
@@ -0,0 +1,16 @@
+import { IStyleSet } from './IStyleSet';
+
+/**
+ * A style function takes in styleprops and returns a partial styleset.
+ */
+export type IStyleFunction<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> = (
+  props: TStylesProps
+) => Partial<TStyleSet>;
+
+/**
+ * Represents either a style function that takes in style props and returns a partial styleset,
+ * or a partial styleset object.
+ */
+export type IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> =
+  | IStyleFunction<TStylesProps, TStyleSet>
+  | Partial<TStyleSet>;
diff --git a/packages/merge-styles/src/IStyleSet.ts b/packages/merge-styles/src/IStyleSet.ts
index 82926ab5b49a8..98062d4b7d048 100644
--- a/packages/merge-styles/src/IStyleSet.ts
+++ b/packages/merge-styles/src/IStyleSet.ts
@@ -1,5 +1,37 @@
 import { IStyle } from './IStyle';
+import { IStyleFunctionOrObject, IStyleFunction } from './IStyleFunction';
 
-export type IStyleSet = {
-  [key: string]: IStyle;
+export type Diff<T extends keyof any, U extends keyof any> = ({ [P in T]: P } &
+  { [P in U]: never } & { [x: string]: never })[T];
+
+export type Omit<U, K extends keyof U> = Pick<U, Diff<keyof U, K>>;
+
+/**
+ * A style set is a dictionary of display areas to IStyle objects.
+ * It may optionally contain style functions for sub components in the special `subComponentStyles`
+ * property.
+ */
+export type IStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
+  [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: IStyle
+} & {
+  subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunctionOrObject<any, IStyleSet<any>> };
+};
+
+/**
+ * A concatenated style set differs from `IStyleSet` in that subComponentStyles will always be a style function.
+ */
+export type IConcatenatedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
+  [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: IStyle
+} & {
+  subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, IStyleSet<any>> };
+};
+
+/**
+ * A processed style set is one which the set of styles associated with each area has been converted
+ * into a class name. Additionally, all subComponentStyles are style functions.
+ */
+export type IProcessedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
+  [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: string
+} & {
+  subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, IStyleSet<any>> };
 };
diff --git a/packages/merge-styles/src/concatStyleSets.test.ts b/packages/merge-styles/src/concatStyleSets.test.ts
index f075d311b047c..4300812c8a835 100644
--- a/packages/merge-styles/src/concatStyleSets.test.ts
+++ b/packages/merge-styles/src/concatStyleSets.test.ts
@@ -1,9 +1,8 @@
 import { concatStyleSets } from './concatStyleSets';
-import { IStyle } from './IStyle';
 
 describe('concatStyleSets', () => {
   it('can concat style sets', () => {
-    const result = concatStyleSets<{ root?: IStyle; a?: IStyle; b?: IStyle }>(
+    const result = concatStyleSets(
       {
         root: { background: 'red' },
         a: { background: 'green' }
@@ -34,4 +33,108 @@ describe('concatStyleSets', () => {
       b: { background: 'blue' }
     });
   });
+
+  it('can concat mixed style sets with style functions on both ends', () => {
+    const fn1 = jest.fn().mockReturnValue({
+      root: { background: 'green', fontSize: 12 }
+    });
+
+    const fn2 = jest.fn().mockReturnValue({
+      root: {
+        background: 'yellow',
+        color: 'pink'
+      }
+    });
+
+    const result = concatStyleSets(
+      {
+        root: { background: 'red' },
+        a: { background: 'green' },
+        subComponentStyles: {
+          a: fn1
+        }
+      },
+      {
+        a: { background: 'white' },
+        b: { background: 'blue' },
+        subComponentStyles: {
+          a: fn2
+        }
+      },
+      {
+        root: {
+          selectors: {
+            ':hover': { background: 'yellow' }
+          }
+        }
+      }
+    );
+
+    expect(result.root).toEqual([
+      { background: 'red' },
+      {
+        selectors: {
+          ':hover': { background: 'yellow' }
+        }
+      }
+    ]);
+
+    expect(result.b).toEqual({ background: 'blue' });
+    expect(result.a).toEqual([{ background: 'green' }, { background: 'white' }]);
+    expect(result.subComponentStyles).toBeDefined();
+    expect(typeof result.subComponentStyles!.a === 'function').toBe(true);
+    const aExpanded = result.subComponentStyles!.a({});
+    expect(aExpanded).toEqual({
+      root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }]
+    });
+  });
+
+  it('can handle falsy values and sub component styles that has objects', () => {
+    const fn1 = jest.fn().mockReturnValue({
+      root: {
+        background: 'green',
+        fontSize: 12
+      }
+    });
+
+    const fn2 = jest.fn().mockReturnValue({
+      root: {
+        background: 'yellow',
+        color: 'pink'
+      }
+    });
+
+    const result = concatStyleSets(
+      false,
+      {
+        subComponentStyles: {
+          a: fn1
+        }
+      },
+      {
+        subComponentStyles: {
+          a: fn2
+        }
+      },
+      undefined,
+      undefined,
+      false,
+      {
+        subComponentStyles: {
+          a: {
+            root: {
+              fontSize: 14
+            }
+          }
+        }
+      }
+    );
+
+    expect(result.subComponentStyles).toBeDefined();
+    expect(typeof result.subComponentStyles!.a === 'function').toBe(true);
+    const aExpanded = result.subComponentStyles!.a({});
+    expect(aExpanded).toEqual({
+      root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }, { fontSize: 14 }]
+    });
+  });
 });
diff --git a/packages/merge-styles/src/concatStyleSets.ts b/packages/merge-styles/src/concatStyleSets.ts
index 7230dd7306bc7..186257ea8ccdb 100644
--- a/packages/merge-styles/src/concatStyleSets.ts
+++ b/packages/merge-styles/src/concatStyleSets.ts
@@ -1,24 +1,177 @@
+import { IStyleSet, IConcatenatedStyleSet } from './IStyleSet';
+import { IStyleBase, IStyle } from './IStyle';
+import { IStyleFunctionOrObject } from './IStyleFunction';
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet The first style set to be concatenated.
+ */
+export function concatStyleSets<TStyleSet extends IStyleSet<TStyleSet>>(
+  styleSet: TStyleSet | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ */
+export function concatStyleSets<TStyleSet1 extends IStyleSet<TStyleSet1>, TStyleSet2 extends IStyleSet<TStyleSet2>>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ */
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3>;
+
 /**
- * Combine a set of styles together (but does not register css classes.)
- * @public
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ * @param styleSet4 The fourth style set to be concatenated.
  */
-export function concatStyleSets<T extends object>(...args: (T | false | null | undefined)[]): T {
-  // tslint:disable-next-line:no-any
-  const mergedSet = {} as any;
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined,
+  styleSet4: TStyleSet3 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4>;
 
-  for (const currentSet of args) {
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ * @param styleSet4 The fourth style set to be concatenated.
+ */
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined,
+  styleSet4: TStyleSet4 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ * @param styleSet4 The fourth style set to be concatenated.
+ * @param styleSet5 The fifth set to be concatenated.
+ */
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>,
+  TStyleSet5 extends IStyleSet<TStyleSet5>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined,
+  styleSet4: TStyleSet4 | false | null | undefined,
+  styleSet5: TStyleSet5 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4 & TStyleSet5>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ * @param styleSet4 The fourth style set to be concatenated.
+ * @param styleSet5 The fifth set to be concatenated.
+ * @param styleSet6 The sixth set to be concatenated.
+ */
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>,
+  TStyleSet5 extends IStyleSet<TStyleSet5>,
+  TStyleSet6 extends IStyleSet<TStyleSet6>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined,
+  styleSet4: TStyleSet4 | false | null | undefined,
+  styleSet5: TStyleSet5 | false | null | undefined,
+  styleSet6: TStyleSet6 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4 & TStyleSet5 & TStyleSet6>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSets One or more stylesets to be merged (each param can also be falsy).
+ */
+export function concatStyleSets(
+  ...styleSets: (IStyleSet<any> | false | null | undefined)[]
+): IConcatenatedStyleSet<any>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSets One or more stylesets to be merged (each param can also be falsy).
+ */
+export function concatStyleSets(
+  ...styleSets: (IStyleSet<any> | false | null | undefined)[]
+): IConcatenatedStyleSet<any> {
+  const mergedSet: IConcatenatedStyleSet<any> = {};
+
+  // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.
+  const workingSubcomponentStyles: { [key: string]: Array<IStyleFunctionOrObject<any, any>> } = {};
+
+  for (const currentSet of styleSets) {
     if (currentSet) {
       for (const prop in currentSet) {
         if (currentSet.hasOwnProperty(prop)) {
-          const mergedValue = mergedSet[prop];
+          if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {
+            // subcomponent styles - style functions or objects
+
+            const currentComponentStyles = currentSet.subComponentStyles;
+            for (const subCompProp in currentComponentStyles) {
+              if (currentComponentStyles.hasOwnProperty(subCompProp)) {
+                if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {
+                  workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);
+                } else {
+                  workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];
+                }
+              }
+            }
+
+            continue;
+          }
+
+          const mergedValue: IStyle = mergedSet[prop];
           const currentValue = currentSet[prop];
 
           if (mergedValue === undefined) {
             mergedSet[prop] = currentValue;
           } else {
             mergedSet[prop] = [
-              ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue]),
-              ...(Array.isArray(currentValue) ? currentValue : [currentValue])
+              // https://github.com/Microsoft/TypeScript/issues/25474
+              ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue as IStyleBase]),
+              ...(Array.isArray(currentValue) ? currentValue : [currentValue as IStyleBase])
             ];
           }
         }
@@ -26,5 +179,25 @@ export function concatStyleSets<T extends object>(...args: (T | false | null | u
     }
   }
 
-  return mergedSet as T;
+  if (Object.keys(workingSubcomponentStyles).length > 0) {
+    mergedSet.subComponentStyles = {};
+    const mergedSubStyles = mergedSet.subComponentStyles;
+
+    // now we process the subcomponent styles if there are any
+    for (const subCompProp in workingSubcomponentStyles) {
+      if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {
+        const workingSet = workingSubcomponentStyles[subCompProp];
+        mergedSubStyles[subCompProp] = (styleProps: any) => {
+          return concatStyleSets(
+            ...workingSet.map(
+              (styleFunctionOrObject: IStyleFunctionOrObject<any, any>) =>
+                typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject
+            )
+          );
+        };
+      }
+    }
+  }
+
+  return mergedSet;
 }
diff --git a/packages/merge-styles/src/extractStyleParts.ts b/packages/merge-styles/src/extractStyleParts.ts
index 25b6bbe9d50ab..3de7f84c4abeb 100644
--- a/packages/merge-styles/src/extractStyleParts.ts
+++ b/packages/merge-styles/src/extractStyleParts.ts
@@ -1,4 +1,4 @@
-import { IStyle } from './IStyle';
+import { IStyle, IStyleBaseArray } from './IStyle';
 import { Stylesheet } from './Stylesheet';
 
 /**
@@ -7,7 +7,7 @@ import { Stylesheet } from './Stylesheet';
  */
 export function extractStyleParts(
   ...args: (IStyle | IStyle[] | false | null | undefined)[]
-): { classes: string[]; objects: IStyle[] } {
+): { classes: string[]; objects: IStyleBaseArray } {
   const classes: string[] = [];
   const objects: {}[] = [];
   const stylesheet = Stylesheet.getInstance();
diff --git a/packages/merge-styles/src/index.ts b/packages/merge-styles/src/index.ts
index c5401019fed3d..43e6719e90188 100644
--- a/packages/merge-styles/src/index.ts
+++ b/packages/merge-styles/src/index.ts
@@ -1,6 +1,8 @@
 export { IRawStyle, IStyle } from './IStyle';
 
-export { IStyleSet } from './IStyleSet';
+export { IStyleFunction, IStyleFunctionOrObject } from './IStyleFunction';
+
+export { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet } from './IStyleSet';
 
 export { IFontFace, IFontWeight } from './IRawStyleBase';
 
diff --git a/packages/merge-styles/src/mergeStyleSets.test.ts b/packages/merge-styles/src/mergeStyleSets.test.ts
index ee1c2b66c5f47..4594be52c5c9c 100644
--- a/packages/merge-styles/src/mergeStyleSets.test.ts
+++ b/packages/merge-styles/src/mergeStyleSets.test.ts
@@ -15,12 +15,26 @@ describe('mergeStyleSets', () => {
   });
 
   it('can merge style sets', () => {
+    const fn1 = jest.fn().mockReturnValue({
+      root: { background: 'green', fontSize: 12 }
+    });
+
+    const fn2 = jest.fn().mockReturnValue({
+      root: {
+        background: 'yellow',
+        color: 'pink'
+      }
+    });
+
     const empty: { c?: string } = {};
-    const result: { root: string; a: string; b: string } = mergeStyleSets(
+    const result = mergeStyleSets(
       empty,
       {
         root: { background: 'red' },
-        a: { background: 'green' }
+        a: { background: 'green' },
+        subComponentStyles: {
+          labelStyles: fn1
+        }
       },
       {
         a: { background: 'white' },
@@ -31,14 +45,20 @@ describe('mergeStyleSets', () => {
           selectors: {
             ':hover': { background: 'yellow' }
           }
+        },
+        subComponentStyles: {
+          labelStyles: fn2
         }
       }
     );
 
-    expect(result).toEqual({
-      root: 'root-0',
-      a: 'a-1',
-      b: 'b-2'
+    expect(result.root).toBe('root-0');
+    expect(result.a).toBe('a-1');
+    expect(result.b).toBe('b-2');
+    expect(result.subComponentStyles).toBeDefined();
+    const mergedLabelStyles = result.subComponentStyles!.labelStyles({});
+    expect(mergedLabelStyles).toEqual({
+      root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }]
     });
 
     expect(_stylesheet.getRules()).toEqual(
diff --git a/packages/merge-styles/src/mergeStyleSets.ts b/packages/merge-styles/src/mergeStyleSets.ts
index 17e5043c0e5d2..662416d0c4bee 100644
--- a/packages/merge-styles/src/mergeStyleSets.ts
+++ b/packages/merge-styles/src/mergeStyleSets.ts
@@ -2,42 +2,126 @@ import { extractStyleParts } from './extractStyleParts';
 import { concatStyleSets } from './concatStyleSets';
 import { IStyle } from './IStyle';
 import { styleToRegistration, applyRegistration } from './styleToClassName';
+import { IStyleSet, IProcessedStyleSet } from './IStyleSet';
 
 /**
- * Allows you to pass in 1 or more sets of areas which will return a merged
- * set of classes.
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
  *
- * @public
+ * @param styleSet The first style set to be merged and reigstered.
  */
-export function mergeStyleSets<K extends string>(
-  ...cssSets: ({ [P in K]?: IStyle } | null | undefined)[]
-): { [P in K]: string } {
+export function mergeStyleSets<TStyleSet extends IStyleSet<TStyleSet>>(
+  styleSet: TStyleSet
+): IProcessedStyleSet<TStyleSet>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSet1 The first style set to be merged.
+ * @param styleSet2 The second style set to be merged.
+ */
+export function mergeStyleSets<TStyleSet1 extends IStyleSet<TStyleSet1>, TStyleSet2 extends IStyleSet<TStyleSet2>>(
+  styleSet1: TStyleSet1,
+  styleSet2: TStyleSet2
+): IProcessedStyleSet<TStyleSet1 & TStyleSet2>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSet1 The first style set to be merged.
+ * @param styleSet2 The second style set to be merged.
+ * @param styleSet3 The third style set to be merged.
+ */
+export function mergeStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>
+>(
+  styleSet1: TStyleSet1,
+  styleSet2: TStyleSet2,
+  styleSet3: TStyleSet3
+): IProcessedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSet1 The first style set to be merged.
+ * @param styleSet2 The second style set to be merged.
+ * @param styleSet3 The third style set to be merged.
+ * @param styleSet4 The fourth style set to be merged.
+ */
+export function mergeStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>
+>(
+  styleSet1: TStyleSet1,
+  styleSet2: TStyleSet2,
+  styleSet3: TStyleSet3,
+  styleSet4: TStyleSet4
+): IProcessedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSets One or more style sets to be merged.
+ */
+export function mergeStyleSets(...styleSets: IStyleSet<any>[]): IProcessedStyleSet<any>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSets One or more style sets to be merged.
+ */
+export function mergeStyleSets(...styleSets: IStyleSet<any>[]): IProcessedStyleSet<any> {
   // tslint:disable-next-line:no-any
   const classNameSet: any = {};
   const classMap: { [key: string]: string } = {};
 
-  let cssSet = cssSets[0];
+  let styleSet = styleSets[0];
 
-  if (cssSet) {
-    if (cssSets.length > 1) {
-      cssSet = concatStyleSets(...cssSets);
+  if (styleSet) {
+    if (styleSets.length > 1) {
+      styleSet = concatStyleSets(...styleSets);
     }
 
     const registrations = [];
 
-    for (const prop in cssSet) {
-      if (cssSet.hasOwnProperty(prop)) {
-        const args: IStyle = cssSet[prop];
+    for (const styleSetArea in styleSet) {
+      if (styleSet.hasOwnProperty(styleSetArea)) {
+        if (styleSetArea === 'subComponentStyles') {
+          classNameSet.subComponentStyles = styleSet.subComponentStyles;
+          continue;
+        }
+
+        const styles: IStyle = styleSet[styleSetArea];
 
-        // tslint:disable-next-line:no-any
-        const { classes, objects } = extractStyleParts(args as any);
-        const registration = styleToRegistration({ displayName: prop }, objects);
+        const { classes, objects } = extractStyleParts(styles);
+        const registration = styleToRegistration({ displayName: styleSetArea }, objects);
 
         registrations.push(registration);
 
         if (registration) {
-          classMap[prop] = registration.className;
-          classNameSet[prop] = classes.concat([registration.className]).join(' ');
+          classMap[styleSetArea] = registration.className;
+          classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');
         }
       }
     }
diff --git a/packages/merge-styles/src/mergeStyles.ts b/packages/merge-styles/src/mergeStyles.ts
index 65e06274fe181..68cb3a74c3dea 100644
--- a/packages/merge-styles/src/mergeStyles.ts
+++ b/packages/merge-styles/src/mergeStyles.ts
@@ -1,4 +1,4 @@
-import { IStyle } from './IStyle';
+import { IStyle, IStyleBaseArray } from './IStyle';
 import { styleToClassName } from './styleToClassName';
 import { extractStyleParts } from './extractStyleParts';
 
@@ -7,7 +7,7 @@ import { extractStyleParts } from './extractStyleParts';
  *
  * @public
  */
-export function mergeStyles(...args: (IStyle | IStyle[] | false | null | undefined)[]): string {
+export function mergeStyles(...args: (IStyle | IStyleBaseArray | false | null | undefined)[]): string {
   const { classes, objects } = extractStyleParts(args);
 
   if (objects.length) {
diff --git a/packages/merge-styles/tslint.json b/packages/merge-styles/tslint.json
index 40ab750468856..753df4fa78b33 100644
--- a/packages/merge-styles/tslint.json
+++ b/packages/merge-styles/tslint.json
@@ -1,4 +1,6 @@
 {
   "extends": ["office-ui-fabric-react-tslint"],
-  "rules": {}
+  "rules": {
+    "no-any": false
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
index 4a52f29628536..d0f2b9710e0c1 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
@@ -8,7 +8,7 @@ import { Link } from '../../../Link';
 export class ActivityItemBasicExample extends React.Component<React.Props<ActivityItemBasicExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     // tslint:disable:jsx-no-lambda
     const activityItemExamples = [
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
index 2ad4833ab17fd..878dc3d5e8da8 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
@@ -9,7 +9,7 @@ import { Icon } from '../../../Icon';
 export class ActivityItemCompactExample extends React.Component<React.Props<ActivityItemCompactExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     const activityItemExamples: Partial<IActivityItemProps & React.Props<{}>>[] = [
       {
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts
index b406a10dde376..9ac841dbc265a 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts
@@ -1,10 +1,6 @@
 import { IStyle } from '../../../Styling';
 
-export interface IActivityItemExampleStyleProps {
-  /**
-   * 404 No Style Props Found
-   */
-}
+export type IActivityItemExampleStyleProps = {};
 
 export interface IActivityItemExampleStyles {
   exampleRoot?: IStyle;
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
index 7f375598cdb08..4d91daf5cff1d 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
@@ -8,7 +8,7 @@ import { Link } from '../../../Link';
 export class ActivityItemPersonaExample extends React.Component<React.Props<ActivityItemPersonaExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     // tslint:disable:jsx-no-lambda
     const activityItemExamples: (IActivityItemProps & { key: string | number })[] = [
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
index 8670dd368baa1..dc424a4d75943 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BaseComponent, getRTL, createRef, classNamesFunction, IClassNames } from '../../Utilities';
+import { BaseComponent, getRTL, createRef, classNamesFunction } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { Link } from '../../Link';
 import { Icon } from '../../Icon';
@@ -28,7 +29,7 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
     overflowIndex: 0
   };
 
-  private _classNames: IClassNames<IBreadcrumbStyles>;
+  private _classNames: IProcessedStyleSet<IBreadcrumbStyles>;
   private _focusZone = createRef<FocusZone>();
 
   constructor(props: IBreadcrumbProps) {
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
index ba1564ff0cd81..2e1d24b70a357 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
@@ -12,7 +12,7 @@ export class ButtonActionExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
index d223ab78adda9..db131e8619eba 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
@@ -8,7 +8,7 @@ export class ButtonAnchorExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
index 7a2abdb3c36b9..a9620f4e16599 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
@@ -1,10 +1,6 @@
 import { IStyle } from '../../../Styling';
 
-export interface IButtonBasicExampleStyleProps {
-  /**
-   * 404 No Style Props Found
-   */
-}
+export type IButtonBasicExampleStyleProps = {};
 
 export interface IButtonBasicExampleStyles {
   example?: IStyle;
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
index e29714bf6e5f8..feb52e5caf15e 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
@@ -13,7 +13,7 @@ export class ButtonCompoundExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example, classNames.twoup)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
index e454509bdc6a4..84c0f745fe162 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
@@ -9,7 +9,7 @@ export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.twoup)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
index ec2b1b9c28cb6..e6f22080e2f84 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
@@ -8,7 +8,7 @@ export class ButtonIconExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
index 2ff49524397cb..9077ae67c334e 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
@@ -8,7 +8,7 @@ export class ButtonPrimaryExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
index 70573ca0c1f66..36d2e272e0b11 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
@@ -8,7 +8,7 @@ export class ButtonScreenReaderExample extends React.Component<IButtonProps, {}>
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
index 5ec946aefc5a1..3917da925f177 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -14,7 +14,7 @@ export class ButtonSplitExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.twoup)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
index 81c87e1be18a8..9115ff93a28a4 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
@@ -52,7 +52,7 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
     );
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return <div className={css(classNames.example)}>{button}</div>;
   }
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx
index 83bc5a898f578..212383af3c29b 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx
@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
-import { IClassNames } from '@uifabric/utilities/lib/IClassNames';
 import {
   IChoiceGroupOptionProps,
   IChoiceGroupOptionStyleProps,
   IChoiceGroupOptionStyles
 } from './ChoiceGroupOption.types';
 import { BaseComponent, classNamesFunction, getNativeProps, inputProperties, createRef } from '../../../Utilities';
+import { IProcessedStyleSet } from '../../../Styling';
 
 const getClassNames = classNamesFunction<IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles>();
 
 export class ChoiceGroupOptionBase extends BaseComponent<IChoiceGroupOptionProps, any> {
   private _inputElement = createRef<HTMLInputElement>();
-  private _classNames: IClassNames<IChoiceGroupOptionStyles>;
+  private _classNames: IProcessedStyleSet<IChoiceGroupOptionStyles>;
 
   constructor(props: IChoiceGroupOptionProps) {
     super(props);
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
index b757084da51fe..fcf68a04ee466 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
@@ -10,7 +10,7 @@ import { Beak, BEAK_HEIGHT, BEAK_WIDTH } from './Beak/Beak';
 import { DirectionalHint } from '../../common/DirectionalHint';
 
 // Coachmark
-import { ICoachmarkTypes } from './Coachmark.types';
+import { ICoachmarkProps } from './Coachmark.types';
 import {
   COACHMARK_HEIGHT,
   COACHMARK_WIDTH,
@@ -102,8 +102,8 @@ export interface ICoachmarkState {
   alertText?: string;
 }
 
-export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
-  public static defaultProps: Partial<ICoachmarkTypes> = {
+export class Coachmark extends BaseComponent<ICoachmarkProps, ICoachmarkState> {
+  public static defaultProps: Partial<ICoachmarkProps> = {
     isCollapsed: true,
     mouseProximityOffset: 10,
     delayBeforeMouseOpen: 3600, // The approximate time the coachmark shows up
@@ -129,7 +129,7 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
    */
   private _targetElementRect: ClientRect;
 
-  constructor(props: ICoachmarkTypes) {
+  constructor(props: ICoachmarkProps) {
     super(props);
 
     // Set defaults for state
@@ -267,18 +267,18 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
     );
   }
 
-  public componentWillReceiveProps(newProps: ICoachmarkTypes): void {
+  public componentWillReceiveProps(newProps: ICoachmarkProps): void {
     if (this.props.isCollapsed && !newProps.isCollapsed) {
       // The coachmark is about to open
       this._openCoachmark();
     }
   }
 
-  public shouldComponentUpdate(newProps: ICoachmarkTypes, newState: ICoachmarkState): boolean {
+  public shouldComponentUpdate(newProps: ICoachmarkProps, newState: ICoachmarkState): boolean {
     return !shallowCompare(newProps, this.props) || !shallowCompare(newState, this.state);
   }
 
-  public componentDidUpdate(prevProps: ICoachmarkTypes, prevState: ICoachmarkState): void {
+  public componentDidUpdate(prevProps: ICoachmarkProps, prevState: ICoachmarkState): void {
     if (
       prevState.targetAlignment !== this.state.targetAlignment ||
       prevState.targetPosition !== this.state.targetPosition
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts
index b7afd92feeb55..f56d8c0340973 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts
@@ -7,7 +7,10 @@ import { ITeachingBubble } from '../../TeachingBubble';
 
 export interface ICoachmark {}
 
-export interface ICoachmarkTypes extends React.Props<Coachmark> {
+/** @deprecated */
+export type ICoachmarkTypes = ICoachmarkProps;
+
+export interface ICoachmarkProps extends React.Props<Coachmark> {
   /**
    * Optional callback to access the ICoachmark interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
index e123732700766..fc1676cfe8a47 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
@@ -56,7 +56,7 @@ export class CoachmarkBasicExample extends BaseComponent<{}, ICoachmarkBasicExam
           display: 'inline-block'
         }
       };
-    });
+    }, {});
 
     const buttonProps: IButtonProps = {
       text: 'Try it'
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
index fd94be01df94f..f759cf97975d5 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
@@ -1,12 +1,12 @@
 import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types';
 import {
-  getGlobalClassNames,
-  getFocusStyle,
-  HighContrastSelector,
+  AnimationClassNames,
   FontSizes,
-  AnimationClassNames
+  HighContrastSelector,
+  IStyle,
+  getFocusStyle,
+  getGlobalClassNames
 } from '../../Styling';
-import { IStyleBaseArray, IStyle } from '../../../../merge-styles/lib/IStyle';
 
 const GlobalClassNames = {
   root: 'ms-DetailsRow',
@@ -104,7 +104,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
 
   const thickBorderStyle = `${values.rowShimmerHorizontalBorder * 4}px solid ${colors.defaultBackgroundColor}`;
   const thinBorderStyle = `${values.rowShimmerHorizontalBorder}px solid ${colors.defaultBackgroundColor}`;
-  const selectedStyles: IStyleBaseArray = [
+  const selectedStyles: IStyle = [
     getFocusStyle(theme, -1, undefined, undefined, themePrimary, white),
     classNames.isSelected,
     {
@@ -189,7 +189,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
     }
   ];
 
-  const cannotSelectStyles: IStyleBaseArray = [
+  const cannotSelectStyles: IStyle = [
     classNames.isContentUnselectable,
     {
       userSelect: 'none',
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
index 112045649fa93..21667125c8f75 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
@@ -162,7 +162,7 @@ export type IDetailsRowStyleProps = Required<Pick<IDetailsRowProps, 'theme'>> &
   /** Whether this row can be selected */
   canSelect?: boolean;
 
-  /** Class name of when this becomes a drop taget */
+  /** Class name of when this becomes a drop target. */
   droppingClassName?: string;
 
   /** Is the checkbox visible */
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
index 0b651380eeab9..85049295d979e 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types';
-import { BaseComponent, classNamesFunction, customizable, IClassNames } from '../../Utilities';
+import { BaseComponent, classNamesFunction, customizable } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 
 const getClassNames = classNamesFunction<IDialogFooterStyleProps, IDialogFooterStyles>();
 
 @customizable('DialogFooter', ['theme', 'styles'])
 export class DialogFooterBase extends BaseComponent<IDialogFooterProps, {}> {
-  private _classNames: IClassNames<IDialogFooterStyles>;
+  private _classNames: IProcessedStyleSet<IDialogFooterStyles>;
 
   public render(): JSX.Element {
     const { className, styles, theme } = this.props;
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts
index a95d649cdc590..c0f1c31a2ad03 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts
@@ -3,11 +3,11 @@ import { memoizeFunction } from '../../Utilities';
 import { mergeStyleSets } from '../../Styling';
 
 export const getStyles = memoizeFunction(
-  (customStyles?: IHoverCardStyles): IHoverCardStyles => {
+  (customStyles: IHoverCardStyles = {}): IHoverCardStyles => {
     const styles: IHoverCardStyles = {
       host: {}
     };
 
-    return mergeStyleSets(styles, customStyles)!;
+    return mergeStyleSets<IHoverCardStyles, IHoverCardStyles>(styles, customStyles);
   }
 );
diff --git a/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx
index 8150dc73ae604..fdb987e951aa3 100644
--- a/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx
@@ -105,7 +105,7 @@ export class KeytipLayerBase extends BaseComponent<IKeytipLayerProps, IKeytipLay
 
     const { keytips, visibleKeytips } = this.state;
 
-    this._classNames = getClassNames(styles!);
+    this._classNames = getClassNames(styles, {});
 
     return (
       <Layer styles={getLayerStyles}>
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx
index 9bb4c0e3536ce..a6f07593d14d1 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx
@@ -9,9 +9,9 @@ import {
   divProperties,
   elementContains,
   focusFirstChild,
-  getNativeProps,
-  IClassNames
+  getNativeProps
 } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { KeytipManager } from '../../utilities/keytips/KeytipManager';
 import {
   IOverflowSet,
@@ -33,7 +33,7 @@ export class OverflowSetBase extends BaseComponent<IOverflowSetProps, {}> implem
   private _persistedKeytips: { [uniqueID: string]: IKeytipProps } = {};
   private _keytipManager: KeytipManager = KeytipManager.getInstance();
   private _divContainer = createRef<HTMLDivElement>();
-  private _classNames: IClassNames<IOverflowSetStyles>;
+  private _classNames: IProcessedStyleSet<IOverflowSetStyles>;
 
   constructor(props: IOverflowSetProps) {
     super(props);
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
index eedd49c9bdef0..b96eb066ac58a 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
@@ -25,7 +25,7 @@ export class OverlayDarkExample extends React.Component<
   public render(): JSX.Element {
     const { isOverlayVisible } = this.state;
     const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
index 6b17e01a7e5f0..164b5c5659dd9 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
@@ -25,7 +25,7 @@ export class OverlayLightExample extends React.Component<
   public render(): JSX.Element {
     const { isOverlayVisible } = this.state;
     const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
index 68a7d6b44a1e4..9a2351fefeae4 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { BaseComponent, classNamesFunction, customizable } from '../../../Utilities';
-import { IStyleSet } from '../../../Styling';
 import { Icon } from '../../../Icon';
 import {
   IPersonaPresenceProps,
@@ -77,8 +76,8 @@ export class PersonaPresenceBase extends BaseComponent<IPersonaPresenceProps, {}
     );
   }
 
-  private _onRenderIcon = (className?: string, styles?: IStyleSet): JSX.Element => (
-    <Icon className={className} iconName={this._determineIcon()} style={styles} />
+  private _onRenderIcon = (className?: string, style?: React.CSSProperties): JSX.Element => (
+    <Icon className={className} iconName={this._determineIcon()} style={style} />
   );
 
   private _determineIcon = (): string | undefined => {
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
index 00c3df21103cf..34bddad5ebc88 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BaseComponent, IClassNames, classNamesFunction, css, customizable, format, getId } from '../../Utilities';
+import { BaseComponent, classNamesFunction, css, customizable, format, getId } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { Icon } from '../../Icon';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { IRatingProps, RatingSize, IRatingStyleProps, IRatingStyles } from './Rating.types';
@@ -10,7 +11,7 @@ interface IRatingStarProps extends React.AllHTMLAttributes<HTMLElement> {
   fillPercentage: number;
   disabled: boolean;
   readOnly: boolean;
-  classNames: IClassNames<IRatingStyles>;
+  classNames: IProcessedStyleSet<IRatingStyles>;
 }
 
 export interface IRatingState {
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
index ed521005031fb..e99d038a740cc 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { getGlobalClassNames, HighContrastSelector, IRawStyle } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerCircle-root',
@@ -12,7 +12,7 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
+  const styles: IRawStyle = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
index e47b75731a261..38c5dc4f48bca 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
+import { IStyle, ITheme, IRawStyle } from '../../../Styling';
 import { IStyleFunctionOrObject } from '../../../Utilities';
 
 export interface IShimmerCircle {}
@@ -23,7 +23,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
   /**
    * Used to
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -38,7 +38,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
 
 export interface IShimmerCircleStyleProps {
   height?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
   theme: ITheme;
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
index 1061d9beea756..8968fa073a07d 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
@@ -5,7 +5,7 @@ import {
   IShimmerElementsGroupStyleProps,
   IShimmerElementsGroupStyles
 } from './ShimmerElementsGroup.types';
-import { IStyleSet } from '../../../Styling';
+import { IRawStyle } from '../../../Styling';
 import { ShimmerElementType, ShimmerElementsDefaultHeights, IShimmerElement } from '../Shimmer.types';
 import { ShimmerLine } from '../ShimmerLine/ShimmerLine';
 import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
@@ -67,11 +67,11 @@ export class ShimmerElementsGroupBase extends BaseComponent<IShimmerElementsGrou
     return renderedElements;
   };
 
-  private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IStyleSet | undefined => {
+  private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IRawStyle | undefined => {
     const elemHeight: number | undefined = elem.height;
     const dif: number = rowHeight && elemHeight ? rowHeight - elemHeight : 0;
 
-    let borderStyle: IStyleSet | undefined;
+    let borderStyle: IRawStyle | undefined;
 
     if (!elem.verticalAlign || elem.verticalAlign === 'center') {
       borderStyle = {
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
index 7133b1e438a48..53f846490de93 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IRawStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerGap-root'
@@ -11,7 +11,7 @@ export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
+  const styles: IRawStyle = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
index 03f362143de62..3eaa94158d411 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
+import { IStyle, IRawStyle, ITheme } from '../../../Styling';
 import { IStyleFunctionOrObject } from '../../../Utilities';
 
 export interface IShimmerGap {}
@@ -29,7 +29,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {
   /**
    * Sets custom styling of the gap.
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -44,7 +44,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {
 
 export interface IShimmerGapStyleProps {
   height?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
   theme: ITheme;
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
index 03e8d7a1c77ce..d02c980f85370 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IRawStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerLine-root',
@@ -15,9 +15,9 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : { borderWidth: '0px' };
+  const styles: IRawStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' };
 
-  const sharedCornerStyles: IStyleSet = {
+  const sharedCornerStyles: IRawStyle = {
     position: 'absolute',
     fill: palette.white
   };
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
index 564f24d05c854..00b672747f4f8 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
+import { IStyle, IRawStyle, ITheme } from '../../../Styling';
 import { IStyleFunctionOrObject } from '../../../Utilities';
 
 export interface IShimmerLine {}
@@ -29,7 +29,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement>
   /**
    * Sets custom styling of the rectangle.
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -44,7 +44,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement>
 
 export interface IShimmerLineStyleProps {
   height?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
   theme: ITheme;
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx
index 9ca4fd3b293f0..599447866fa58 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx
@@ -1,12 +1,6 @@
 import * as React from 'react';
-import {
-  BaseComponent,
-  classNamesFunction,
-  customizable,
-  divProperties,
-  getNativeProps,
-  IClassNames
-} from '../../Utilities';
+import { BaseComponent, classNamesFunction, customizable, divProperties, getNativeProps } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { ITooltipProps, ITooltipStyleProps, ITooltipStyles, TooltipDelay } from './Tooltip.types';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
@@ -29,7 +23,7 @@ export class TooltipBase extends BaseComponent<ITooltipProps, any> {
     }
   };
 
-  private _classNames: IClassNames<ITooltipStyles>;
+  private _classNames: IProcessedStyleSet<ITooltipStyles>;
 
   public render(): JSX.Element {
     const {
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts
index 336a9ff461464..2965b2394327d 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts
@@ -15,16 +15,12 @@ export const getStyles = (props: ITooltipStyleProps): ITooltipStyles => {
         animationDelay: '300ms',
         maxWidth: maxWidth
       },
-      delay === TooltipDelay.zero && [
-        {
-          animationDelay: '0s'
-        }
-      ],
-      delay === TooltipDelay.long && [
-        {
-          animationDelay: '500ms'
-        }
-      ],
+      delay === TooltipDelay.zero && {
+        animationDelay: '0s'
+      },
+      delay === TooltipDelay.long && {
+        animationDelay: '500ms'
+      },
       className
     ],
     content: [
diff --git a/packages/styling/src/MergeStyles.ts b/packages/styling/src/MergeStyles.ts
index 23e5b0c90cec7..1e438a7c8b128 100644
--- a/packages/styling/src/MergeStyles.ts
+++ b/packages/styling/src/MergeStyles.ts
@@ -4,6 +4,7 @@ export {
   IRawStyle,
   IStyle,
   IStyleSet,
+  IProcessedStyleSet,
   IStyleSheetConfig,
   InjectionMode,
   Stylesheet,
diff --git a/packages/utilities/jest.config.js b/packages/utilities/jest.config.js
index 75777beb26672..3e8f1ab9a5e62 100644
--- a/packages/utilities/jest.config.js
+++ b/packages/utilities/jest.config.js
@@ -4,5 +4,3 @@ module.exports = createConfig({
   setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
   snapshotSerializers: [path.resolve(__dirname, './node_modules/@uifabric/jest-serializer-merge-styles')]
 });
-
-console.log(module.exports.setupFiles);
diff --git a/packages/utilities/src/IClassNames.ts b/packages/utilities/src/IClassNames.ts
index da7501f6c408f..8c77fcb5bc086 100644
--- a/packages/utilities/src/IClassNames.ts
+++ b/packages/utilities/src/IClassNames.ts
@@ -1 +1,4 @@
+/**
+ * @deprecated Use `IProcessedStyleSet` from @uifabric/styling or @uifabric/merge-styles instead.
+ */
 export type IClassNames<T> = { [key in keyof T]: string };
diff --git a/packages/utilities/src/IStyleFunction.ts b/packages/utilities/src/IStyleFunction.ts
index 291ca7c6c03d9..cf598645419f3 100644
--- a/packages/utilities/src/IStyleFunction.ts
+++ b/packages/utilities/src/IStyleFunction.ts
@@ -1 +1 @@
-export type IStyleFunction<TStylesProps, TStyles> = (props: TStylesProps) => Partial<TStyles>;
+export { IStyleFunction } from '@uifabric/merge-styles';
diff --git a/packages/utilities/src/classNamesFunction.ts b/packages/utilities/src/classNamesFunction.ts
index bcbed39b6fe69..958ec037cad66 100644
--- a/packages/utilities/src/classNamesFunction.ts
+++ b/packages/utilities/src/classNamesFunction.ts
@@ -1,17 +1,34 @@
-import { mergeStyleSets, IStyle } from '@uifabric/merge-styles';
-import { IClassNames } from './IClassNames';
-import { IStyleFunction } from './IStyleFunction';
-import { IStyleFunctionOrObject } from './styled';
+import { mergeStyleSets, IStyle, IStyleSet, IProcessedStyleSet } from '@uifabric/merge-styles';
+import { IStyleFunctionOrObject } from '@uifabric/merge-styles';
 
 /**
  * Creates a getClassNames function which calls getStyles given the props, and injects them
  * into mergeStyleSets.
  */
-export function classNamesFunction<TStyleProps extends {}, TStyles extends { [P in keyof TStyles]: IStyle }>(): (
-  getStyles?: IStyleFunctionOrObject<TStyleProps, TStyles>,
+export function classNamesFunction<TStyleProps extends {}, TStyleSet extends IStyleSet<TStyleSet>>(): (
+  getStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined,
   styleProps?: TStyleProps
-) => IClassNames<TStyles> {
+) => IProcessedStyleSet<TStyleSet> {
   // TODO: memoize.
-  return (getStyles?: IStyleFunctionOrObject<TStyleProps, TStyles>, styleProps?: TStyleProps): IClassNames<TStyles> =>
-    mergeStyleSets(getStyles && (typeof getStyles === 'function' ? getStyles(styleProps!) : getStyles));
+
+  const getClassNames = (
+    styleFunctionOrObject: IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined,
+    styleProps: TStyleProps = {} as TStyleProps
+  ): IProcessedStyleSet<TStyleSet> => {
+    // styleSet might be undefined if styleFunctionOrObject is undefined, but getStyles should never
+    // ordinarily be undefined (it would hardly make any sense).
+    // However, because we usually use `props.styles` as the argument to an invocation of this method, and
+    // `props.styles` itself is defined as optional, this avoids the need to use `!` at all invocation points.
+    if (styleFunctionOrObject === undefined) {
+      return {} as IProcessedStyleSet<TStyleSet>;
+    }
+
+    const styleSet =
+      styleFunctionOrObject &&
+      (typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps!) : styleFunctionOrObject);
+
+    return mergeStyleSets(styleSet as TStyleSet);
+  };
+
+  return getClassNames;
 }
diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts
index 53dacd171c3fb..0dd5a470c5862 100644
--- a/packages/utilities/src/index.ts
+++ b/packages/utilities/src/index.ts
@@ -1,3 +1,4 @@
+export { IStyleFunctionOrObject } from '@uifabric/merge-styles';
 export * from './aria';
 export * from './Async';
 export * from './AutoScroll';
diff --git a/packages/utilities/src/styled.test.tsx b/packages/utilities/src/styled.test.tsx
index 9bb432aa7aec6..ae65817b8dd95 100644
--- a/packages/utilities/src/styled.test.tsx
+++ b/packages/utilities/src/styled.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { styled, IStyleFunctionOrObject } from './styled';
+import { styled } from './styled';
 import * as renderer from 'react-test-renderer';
 import { Customizer } from './Customizer';
-import { IStyle, Stylesheet, InjectionMode } from '@uifabric/merge-styles';
+import { IStyle, Stylesheet, InjectionMode, IStyleFunctionOrObject } from '@uifabric/merge-styles';
 import { classNamesFunction } from './classNamesFunction';
 
 interface ITestStyles {
diff --git a/packages/utilities/src/styled.tsx b/packages/utilities/src/styled.tsx
index a4d59a5af1734..e5ae684c5507d 100644
--- a/packages/utilities/src/styled.tsx
+++ b/packages/utilities/src/styled.tsx
@@ -1,17 +1,11 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { concatStyleSets } from '@uifabric/merge-styles';
+import { concatStyleSets, IStyleSet, IStyleFunctionOrObject, IConcatenatedStyleSet } from '@uifabric/merge-styles';
 import { IStyleFunction } from './IStyleFunction';
 import { CustomizableContextTypes } from './customizable';
 import { Customizations, ICustomizations } from './Customizations';
 
-export type IStyleFunctionOrObject<TStyleProps, TStyles> = IStyleFunction<TStyleProps, TStyles> | Partial<TStyles>;
-
-export interface IPropsWithStyles<TStyleProps, TStyles> {
-  styles?: IStyleFunctionOrObject<TStyleProps, TStyles>;
-  subComponents?: {
-    [key: string]: IStyleFunction<{}, {}>;
-  };
+export interface IPropsWithStyles<TStyleProps, TStyleSet extends IStyleSet<TStyleSet>> {
+  styles?: IStyleFunctionOrObject<TStyleProps, TStyleSet>;
 }
 
 export interface ICustomizableProps {
@@ -45,9 +39,13 @@ const DefaultFields = ['theme', 'styles'];
  * @param getProps - A helper which provides default props.
  * @param customizable - An object which defines which props can be customized using the Customizer.
  */
-export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TStyles>, TStyleProps, TStyles>(
+export function styled<
+  TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet>,
+  TStyleProps,
+  TStyleSet extends IStyleSet<TStyleSet>
+>(
   Component: React.ComponentClass<TComponentProps> | React.StatelessComponent<TComponentProps>,
-  baseStyles: IStyleFunctionOrObject<TStyleProps, TStyles>,
+  baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>,
   getProps?: (props: TComponentProps) => Partial<TComponentProps>,
   customizable?: ICustomizableProps
 ): (props: TComponentProps) => JSX.Element {
@@ -74,11 +72,11 @@ export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TSt
   return Wrapped as (props: TComponentProps) => JSX.Element;
 }
 
-function _resolve<TStyleProps, TStyles>(
+function _resolve<TStyleProps, TStyleSet extends IStyleSet<TStyleSet>>(
   styleProps: TStyleProps,
-  ...allStyles: (IStyleFunctionOrObject<TStyleProps, Partial<TStyles>> | undefined)[]
-): Partial<TStyles> | undefined {
-  const result: Partial<TStyles>[] = [];
+  ...allStyles: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[]
+): IConcatenatedStyleSet<TStyleSet> | undefined {
+  const result: Partial<TStyleSet>[] = [];
 
   for (const styles of allStyles) {
     if (styles) {
@@ -86,7 +84,12 @@ function _resolve<TStyleProps, TStyles>(
     }
   }
   if (result.length) {
-    return concatStyleSets(...result);
+    // cliffkoh: I cannot figure out how to avoid the cast to any here.
+    // It is something to do with the use of Omit in IStyleSet.
+    // It might not be necessary once  Omit becomes part of lib.d.ts (when we remove our own Omit and rely on
+    // the official version).
+    // tslint:disable-next-line:no-any
+    return concatStyleSets(...(result as any)) as IConcatenatedStyleSet<TStyleSet>;
   }
 
   return undefined;
diff --git a/scripts/package.json b/scripts/package.json
index d9230c0ca5630..2e56771037035 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -42,7 +42,7 @@
     "ts-loader": "^4.1.0",
     "tslint": "^5.7.0",
     "tslint-microsoft-contrib": "^5.0.1",
-    "typescript": "2.8.1",
+    "typescript": "2.9.2",
     "webpack": "4.7.0",
     "webpack-bundle-analyzer": "^2.11.1",
     "webpack-cli": "2.1.2",