{
+ this.themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
+ this.theme = this.themeProvider.tryGetTheme();
+ this.themeProvider.themeChangedEvent.add(this, this.onThemeChanged);
+
+ return super.onInit();
+ }
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ AppContext.Provider,
+ {
+ value: {
+ theme: { ...this.theme }
+ }
+ },
+ React.createElement(StylesDemo)
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ private onThemeChanged(args: ThemeChangedEventArgs) {
+ this.theme = args.theme;
+ this.render();
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ header: {
+ description: strings.PropertyPaneDescription
+ },
+ groups: [
+ {
+ groupName: strings.BasicGroupName,
+ groupFields: [
+ PropertyPaneTextField('description', {
+ label: strings.DescriptionFieldLabel
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/StylesDemo.tsx b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/StylesDemo.tsx
new file mode 100644
index 000000000..a3bfbadf3
--- /dev/null
+++ b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/StylesDemo.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TypeStyleButton } from './TypeStyleButton/TypeStyleButton';
+
+export const StylesDemo: React.FC = () => (
+
+);
diff --git a/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/TypeStyleButton/TypeStyleButton.styles.ts b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/TypeStyleButton/TypeStyleButton.styles.ts
new file mode 100644
index 000000000..41e2e9996
--- /dev/null
+++ b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/TypeStyleButton/TypeStyleButton.styles.ts
@@ -0,0 +1,29 @@
+import { stylesheet } from "typestyle";
+import { IReadonlyTheme } from "@microsoft/sp-component-base";
+
+export const createStyles = (theme: IReadonlyTheme) => {
+ return stylesheet({
+ root: {
+ margin: "10px",
+ },
+ myButton: {
+ backgroundColor: theme.palette.themePrimary,
+ color: theme.palette.white,
+ height: "60px",
+ lineHeight: "60px",
+ textAlign: "center",
+ fontSize: "16px",
+ padding: "0 15px",
+ cursor: "pointer",
+ borderWidth: "0 0 6px 0",
+ fontWeight: "bold",
+ borderColor: "#4e84c3",
+ borderStyle: "solid",
+ $nest: {
+ "&:hover": {
+ backgroundColor: "#328bf9",
+ }
+ }
+ }
+ });
+};
diff --git a/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/TypeStyleButton/TypeStyleButton.tsx b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/TypeStyleButton/TypeStyleButton.tsx
new file mode 100644
index 000000000..668e9acdb
--- /dev/null
+++ b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/components/TypeStyleButton/TypeStyleButton.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { createStyles } from "./TypeStyleButton.styles";
+import { useThemedStyles } from '../../../../hooks/useThemedStyles';
+import AppContext from '../../../../common/AppContext';
+
+export const TypeStyleButton: React.FC = () => {
+ const { theme } = React.useContext(AppContext);
+ const styles = useThemedStyles(theme, createStyles);
+
+ const [enabled, setEnabled] = React.useState(true);
+
+ const toggleEnable = () => {
+ setEnabled(!enabled);
+ };
+
+ return (
+
+
+
+ );
+};
diff --git a/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/loc/en-us.js b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/loc/en-us.js
new file mode 100644
index 000000000..89f98bc1e
--- /dev/null
+++ b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/loc/en-us.js
@@ -0,0 +1,7 @@
+define([], function() {
+ return {
+ "PropertyPaneDescription": "Description",
+ "BasicGroupName": "Group Name",
+ "DescriptionFieldLabel": "Description Field"
+ }
+});
\ No newline at end of file
diff --git a/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/loc/mystrings.d.ts b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/loc/mystrings.d.ts
new file mode 100644
index 000000000..9aea92af5
--- /dev/null
+++ b/samples/react-css-in-js-typestyle/src/webparts/dynamicTypeStyle/loc/mystrings.d.ts
@@ -0,0 +1,10 @@
+declare interface IDynamicTypeStyleWebPartStrings {
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ DescriptionFieldLabel: string;
+}
+
+declare module 'DynamicTypeStyleWebPartStrings' {
+ const strings: IDynamicTypeStyleWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-css-in-js-typestyle/teams/0055998e-a48a-4453-bc2e-ecedebed480d_color.png b/samples/react-css-in-js-typestyle/teams/0055998e-a48a-4453-bc2e-ecedebed480d_color.png
new file mode 100644
index 000000000..a8d279707
Binary files /dev/null and b/samples/react-css-in-js-typestyle/teams/0055998e-a48a-4453-bc2e-ecedebed480d_color.png differ
diff --git a/samples/react-css-in-js-typestyle/teams/0055998e-a48a-4453-bc2e-ecedebed480d_outline.png b/samples/react-css-in-js-typestyle/teams/0055998e-a48a-4453-bc2e-ecedebed480d_outline.png
new file mode 100644
index 000000000..6df4a038d
Binary files /dev/null and b/samples/react-css-in-js-typestyle/teams/0055998e-a48a-4453-bc2e-ecedebed480d_outline.png differ
diff --git a/samples/react-css-in-js-typestyle/tsconfig.json b/samples/react-css-in-js-typestyle/tsconfig.json
new file mode 100644
index 000000000..9cadc0b33
--- /dev/null
+++ b/samples/react-css-in-js-typestyle/tsconfig.json
@@ -0,0 +1,38 @@
+{
+ "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+ "compilerOptions": {
+ "target": "es5",
+ "forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "jsx": "react",
+ "declaration": true,
+ "sourceMap": true,
+ "experimentalDecorators": true,
+ "skipLibCheck": true,
+ "outDir": "lib",
+ "inlineSources": false,
+ "strictNullChecks": false,
+ "noUnusedLocals": false,
+ "typeRoots": [
+ "./node_modules/@types",
+ "./node_modules/@microsoft"
+ ],
+ "types": [
+ "es6-promise",
+ "webpack-env"
+ ],
+ "lib": [
+ "es5",
+ "dom",
+ "es2015.collection"
+ ]
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules",
+ "lib"
+ ]
+}
diff --git a/samples/react-css-in-js-typestyle/tslint.json b/samples/react-css-in-js-typestyle/tslint.json
new file mode 100644
index 000000000..23fa2aa43
--- /dev/null
+++ b/samples/react-css-in-js-typestyle/tslint.json
@@ -0,0 +1,30 @@
+{
+ "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+ "rules": {
+ "class-name": false,
+ "export-name": false,
+ "forin": false,
+ "label-position": false,
+ "member-access": true,
+ "no-arg": false,
+ "no-console": false,
+ "no-construct": false,
+ "no-duplicate-variable": true,
+ "no-eval": false,
+ "no-function-expression": true,
+ "no-internal-module": true,
+ "no-shadowed-variable": true,
+ "no-switch-case-fall-through": true,
+ "no-unnecessary-semicolons": true,
+ "no-unused-expression": true,
+ "no-use-before-declare": true,
+ "no-with-statement": true,
+ "semicolon": true,
+ "trailing-comma": false,
+ "typedef": false,
+ "typedef-whitespace": false,
+ "use-named-parameter": true,
+ "variable-name": false,
+ "whitespace": false
+ }
+}
\ No newline at end of file