[styles] Fix styled type definition not including properties

docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx

@@ -1,23 +1,24 @@
 import React from 'react';
 import { styled } from '@material-ui/styles';
-import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { Omit } from '@material-ui/types';
 
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
-
-interface Props {
+interface MyButtonProps {
   color: 'red' | 'blue';
 }
 
-type MyButtonProps = Props & Omit<MuiButtonProps, keyof Props>;
-
-const MyButton = styled(({ color, ...other }: MyButtonProps) => <Button {...other} />)({
-  background: (props: Props) =>
+const MyButton = styled(
+  ({ color, ...other }: MyButtonProps & Omit<ButtonProps, keyof MyButtonProps>) => (
+    <Button {...other} />
+  ),
+)({
+  background: (props: MyButtonProps) =>
     props.color === 'red'
       ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
       : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
   border: 0,
   borderRadius: 3,
-  boxShadow: (props: Props) =>
+  boxShadow: (props: MyButtonProps) =>
     props.color === 'red'
       ? '0 3px 5px 2px rgba(255, 105, 135, .3)'
       : '0 3px 5px 2px rgba(33, 203, 243, .3)',

docs/src/pages/styles/basics/AdaptingStyledComponents.js

@@ -19,13 +19,11 @@ const MyButton = styled(({ color, ...other }) => <Button {...other} />)({
   margin: 8,
 });
 
-function AdaptingStyledComponents() {
+export default function AdaptingStyledComponents() {
   return (
     <React.Fragment>
       <MyButton color="red">Red</MyButton>
       <MyButton color="blue">Blue</MyButton>
     </React.Fragment>
   );
 }
-
-export default AdaptingStyledComponents;

docs/src/pages/styles/basics/AdaptingStyledComponents.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { Omit } from '@material-ui/types';
+
+interface MyButtonProps {
+  color: 'red' | 'blue';
+}
+
+const MyButton = styled(
+  ({ color, ...other }: MyButtonProps & Omit<ButtonProps, keyof MyButtonProps>) => (
+    <Button {...other} />
+  ),
+)({
+  background: (props: MyButtonProps) =>
+    props.color === 'red'
+      ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
+      : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: (props: MyButtonProps) =>
+    props.color === 'red'
+      ? '0 3px 5px 2px rgba(255, 105, 135, .3)'
+      : '0 3px 5px 2px rgba(33, 203, 243, .3)',
+  color: 'white',
+  height: 48,
+  padding: '0 30px',
+  margin: 8,
+});
+
+export default function AdaptingStyledComponents() {
+  return (
+    <React.Fragment>
+      <MyButton color="red">Red</MyButton>
+      <MyButton color="blue">Blue</MyButton>
+    </React.Fragment>
+  );
+}

docs/src/pages/styles/basics/StyledComponents.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import Button from '@material-ui/core/Button';
+
+const MyButton = styled(Button)({
+  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+  color: 'white',
+  height: 48,
+  padding: '0 30px',
+});
+
+export default function StyledComponents() {
+  return <MyButton>Styled Components</MyButton>;
+}

docs/src/pages/system/basics/JSS.js

@@ -9,12 +9,10 @@ const Box = styled('div')(
   ),
 );
 
-function JSS() {
+export default function JSS() {
   return (
     <Box color="white" bgcolor="palevioletred" p={1}>
       JSS
     </Box>
   );
 }
-
-export default JSS;

docs/src/pages/system/basics/JSS.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import { compose, spacing, palette } from '@material-ui/system';
+
+const Box = styled('div')(
+  compose(
+    spacing,
+    palette,
+  ),
+);
+
+export default function JSS() {
+  return (
+    <Box color="white" bgcolor="palevioletred" p={1}>
+      JSS
+    </Box>
+  );
+}

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

@@ -5,9 +5,7 @@ import {
   Styles,
   WithStylesOptions,
 } from '@material-ui/styles/withStyles';
-
-// https://stackoverflow.com/a/49928360/3406963 without generic branch types
-export type IsAny<T> = 0 extends (1 & T) ? true : false;
+import { IsAny } from '@material-ui/types';
 
 export type Or<A, B, C = false> = A extends true
   ? true

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

@@ -1,4 +1,4 @@
-import { Omit } from '@material-ui/types';
+import { Omit, IsAny, CoerceEmptyInterface } from '@material-ui/types';
 import {
   CreateCSSProperties,
   StyledComponentProps,
@@ -19,7 +19,7 @@ export type ComponentCreator<Component extends React.ElementType> = <Theme, Prop
     JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
     'classes' | 'className'
   > &
-    StyledComponentProps<'root'> & { className?: string }
+    StyledComponentProps<'root'> & { className?: string } & CoerceEmptyInterface<Props>
 >;
 
 export interface StyledProps {

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

@@ -155,6 +155,9 @@ import styled, { StyledProps } from '@material-ui/styles/styled';
   interface MyTheme {
     fontFamily: string;
   }
+  const MyThemeInstance: MyTheme = {
+    fontFamily: 'monospace',
+  };
   // tslint:disable-next-line: no-empty-interface
   interface MyComponentProps extends StyledProps {
     defaulted: string;
@@ -176,7 +179,7 @@ import styled, { StyledProps } from '@material-ui/styles/styled';
   const renderedMyComponent = (
     <>
       <MyComponent className="test" />
-      <StyledMyComponent />
+      <StyledMyComponent theme={MyThemeInstance} />
     </>
   );
 }

packages/material-ui-types/index.d.ts

@@ -42,3 +42,14 @@ export type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof
  * @internal
  */
 export type Overwrite<T, U> = Omit<T, keyof U> & U;
+
+/**
+ * Returns true if T is any, otherwise false
+ */
+// https://stackoverflow.com/a/49928360/3406963 without generic branch types
+export type IsAny<T> = 0 extends (1 & T) ? true : false;
+
+/**
+ * Returns an empty object type if T is any, otherwise returns T
+ */
+export type CoerceEmptyInterface<T> = IsAny<T> extends true ? {} : T;