[styles] Support augmenting CSS properties (#16333)

* [styles] Add flip to CSS properties

* guides/right-to-left/RtlOptOut

* Remove flip, augment it instead

* Update RtlOptOut.tsx

Author: merceyz

docs/src/pages/guides/right-to-left/RtlOptOut.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
     marginTop: theme.spacing(4),
@@ -15,10 +14,10 @@ const styles = theme => ({
     flip: false,
     textAlign: 'right',
   },
-});
+}));
 
-function RtlOptOut(props) {
-  const { classes } = props;
+export default function RtlOptOut() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -27,9 +26,3 @@ function RtlOptOut(props) {
     </div>
   );
 }
-
-RtlOptOut.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(RtlOptOut);

docs/src/pages/guides/right-to-left/RtlOptOut.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+declare module '@material-ui/core/styles/withStyles' {
+  // Augment the BaseCSSProperties so that we can control jss-rtl
+  interface BaseCSSProperties {
+    /**
+     * Used to control if the rule-set should be affected by rtl transformation
+     */
+    flip?: boolean;
+  }
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      marginTop: theme.spacing(4),
+      marginRight: theme.spacing(2),
+    },
+    affected: {
+      textAlign: 'right',
+    },
+    unaffected: {
+      flip: false,
+      textAlign: 'right',
+    },
+  }),
+);
+
+export default function RtlOptOut() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.affected}>Affected</div>
+      <div className={classes.unaffected}>Unaffected</div>
+    </div>
+  );
+}

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

@@ -3,15 +3,18 @@ import { PropInjector, CoerceEmptyInterface, IsEmptyInterface } from '@material-
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
 
-export interface CSSProperties extends CSS.Properties<number | string> {
+/**
+ * Allows the user to augment the properties available
+ */
+export interface BaseCSSProperties extends CSS.Properties<number | string> {}
+
+export interface CSSProperties extends BaseCSSProperties {
   // Allow pseudo selectors and media queries
-  [k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
+  [k: string]: BaseCSSProperties[keyof BaseCSSProperties] | CSSProperties;
 }
 
 export type BaseCreateCSSProperties<Props extends object = {}> = {
-  [P in keyof CSS.Properties<number | string>]:
-    | CSS.Properties<number | string>[P]
-    | ((props: Props) => CSS.Properties<number | string>[P])
+  [P in keyof BaseCSSProperties]: BaseCSSProperties[P] | ((props: Props) => BaseCSSProperties[P])
 };
 
 export interface CreateCSSProperties<Props extends object = {}>

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

@@ -10,6 +10,7 @@ import {
   StyleRulesCallback,
   Styles,
   ClassKeyOfStyles,
+  BaseCSSProperties,
 } from '@material-ui/styles/withStyles';
 
 export {
@@ -20,6 +21,7 @@ export {
   Styles,
   WithStylesOptions,
   StyleRulesCallback,
+  BaseCSSProperties,
 };
 
 /**