diff --git a/docs/src/pages/guides/right-to-left/RtlOptOut.js b/docs/src/pages/guides/right-to-left/RtlOptOut.js
index db13a909018601..ab39ee467f97bb 100644
--- a/docs/src/pages/guides/right-to-left/RtlOptOut.js
+++ b/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 (
@@ -27,9 +26,3 @@ function RtlOptOut(props) {
);
}
-
-RtlOptOut.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(RtlOptOut);
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOut.tsx b/docs/src/pages/guides/right-to-left/RtlOptOut.tsx
new file mode 100644
index 00000000000000..4084ff77cfdfec
--- /dev/null
+++ b/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 (
+
+
Affected
+
Unaffected
+
+ );
+}
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index 26fc2ddf13a434..9af1b7ea82a0dc 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/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 {
+/**
+ * Allows the user to augment the properties available
+ */
+export interface BaseCSSProperties extends CSS.Properties {}
+
+export interface CSSProperties extends BaseCSSProperties {
// Allow pseudo selectors and media queries
- [k: string]: CSS.Properties[keyof CSS.Properties] | CSSProperties;
+ [k: string]: BaseCSSProperties[keyof BaseCSSProperties] | CSSProperties;
}
export type BaseCreateCSSProperties = {
- [P in keyof CSS.Properties]:
- | CSS.Properties[P]
- | ((props: Props) => CSS.Properties[P])
+ [P in keyof BaseCSSProperties]: BaseCSSProperties[P] | ((props: Props) => BaseCSSProperties[P])
};
export interface CreateCSSProperties
diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index 4707ca3671c221..8027dc52404b27 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/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,
};
/**