Support string templates in Typescript

docs/src/pages/styles/advanced/StringTemplates.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { jssPreset, StylesProvider, makeStyles } from '@material-ui/styles';
+import { create } from 'jss';
+import jssTemplate from 'jss-plugin-template';
+
+const jss = create({
+  plugins: [jssTemplate(), ...jssPreset().plugins],
+});
+
+const useStyles = makeStyles({
+  root: `
+    background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
+    border-radius: 3px;
+    font-size: 16px;
+    border: 0;
+    color: white;
+    height: 48px;
+    padding: 0 30px;
+    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
+  `,
+});
+
+function Child() {
+  const classes = useStyles();
+  return (
+    <button type="button" className={classes.root}>
+      String templates
+    </button>
+  );
+}
+
+function StringTemplates() {
+  return (
+    <StylesProvider jss={jss}>
+      <Child />
+    </StylesProvider>
+  );
+}
+
+export default StringTemplates;

packages/material-ui-styles/src/makeStyles/makeStyles.d.ts

@@ -41,6 +41,6 @@ export default function makeStyles<
   Props extends {} = {},
   ClassKey extends string = string
 >(
-  styles: Styles<Theme, Props, ClassKey>,
+  styles: Styles<Theme, Props, ClassKey> | Record<ClassKey, string>,
   options?: Omit<WithStylesOptions<Theme>, 'withTheme'>,
 ): StylesHook<Styles<Theme, Props, ClassKey>>;

packages/material-ui-styles/src/makeStyles/makeStyles.test.js

@@ -244,6 +244,22 @@ describe('makeStyles', () => {
       assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root' });
     });
 
+    it('should apply string styles', () => {
+      const useStyles = makeStyles({ root: `display: flex;` });
+      const StyledComponent = () => {
+        const classes = useStyles();
+        return <div className={classes.root} />;
+      };
+
+      mount(
+        <StylesProvider sheetsRegistry={sheetsRegistry} sheetsCache={new Map()}>
+          <StyledComponent />
+        </StylesProvider>,
+      );
+      assert.strictEqual(sheetsRegistry.registry.length, 1);
+      assert.deepEqual(sheetsRegistry.registry[0].rules.raw, { root: 'display: flex;' });
+    });
+
     describe('overrides', () => {
       it('should support the overrides key', () => {
         const useStyles = makeStyles(

packages/material-ui-styles/test/styles.spec.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
   createStyles,
+  makeStyles,
+  WithStyles,
   withStyles,
   withTheme,
   WithTheme,
-  WithStyles,
-  makeStyles,
 } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 import { Theme } from '@material-ui/core/styles';
@@ -450,6 +450,22 @@ function forwardRefTest() {
   const root2 = styles.root2;
 }
 
+{
+  // It works with string styles
+  interface testProps {
+    foo: boolean;
+  }
+
+  const useStyles = makeStyles({
+    root: `
+      display: flex;
+    `,
+  });
+  const styles = useStyles({ foo: true });
+  // $ExpectType string
+  const root = styles.root;
+}
+
 {
   // If there are no props, use the definition that doesn't accept them
   // https://github.com/mui-org/material-ui/issues/16198