Repository: mui/material-ui (TypeScript)
Date: 2019-08-15 21:13:35+00:00
Task type: Bug Fix

Issue:
jss-rtl is not working when passing style as an object to makeStyles
Apparently 'jss-rtl' has no effect when passing styles as an object to the 'makeStyles', however, it does work when returning styles from a function. 

<!-- Checked checkbox should look like this: [x] -->
- [x ] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [x ] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior 🤔
RTL should work with both makeStyles({}) and makeStyles(()=>{})

## Current Behavior 😯
RTL works only when using function:  makeStyles(()=>{})

## Steps to Reproduce 🕹
Please have look at Direction.js file.
[https://codesandbox.io/s/material-demo-4tbyo](https://codesandbox.io/s/material-demo-4tbyo)

## Context 🔦
it will cause confusion during development.

## Your Environment 🌎

| Tech         | Version |
|--------------|---------|
| Material-UI  | v4.0.2  |
| React        |     16.9.0    |
| Browser      |    chrome     |



Issue discussion:
@Cyrus-d Thanks for the issue, this is the more updated version of #10823. You have the following workaround:
```jsx
<StylesProvider flip />
```
https://codesandbox.io/s/material-demo-oo8sg

Do you want to update the documentation about it :)?
@oliviertassinari thanks for the suggestion, but I am a bit confused now, using `flip` as you have suggested will stop 'jss-rtl' from doing it job entirely. and I don't think the problem is there, maybe I haven't explained the problem properly.

I have modified the demo to make a bit more clear:

[https://codesandbox.io/s/material-demo-ojkvr](https://codesandbox.io/s/material-demo-ojkvr)

I have provided styles to  `makeStyles` in two ways; one with the object `({})` and other with function `(()=>{})`.

Now I have 2 boxes and both should have padding at the start of the box when toggling direction. 

Note that for RTL the padding should be right-hand side.

In 'LTR' mode both box should have left padding which is what i am expacting (no problem here) :
  
![Capture](https://user-images.githubusercontent.com/4041334/59096094-005ca900-8912-11e9-9300-8b62a8fcfdb6.PNG)

now when changing direction to 'RTL' i am expecting both boxes have right padding as the direction changed, the first box is not reflecting the changes because the style has been provided like this:

```
const useStyles = makeStyles({
  root: {
    paddingLeft: 50,
  }
});
```
the second box reflects the change and flips the padding at the right of the box because i have returned the style from a function

```
const useStyles2 = makeStyles(() => {
  return {
    root: {
      paddingLeft: 50,
    }
  };
});
```

![Capture](https://user-images.githubusercontent.com/4041334/59096564-0606be80-8913-11e9-91d0-342b4373cec7.PNG)


hope it makes sense.
thanks



ok, i was wrong, your solution does work, however, it won't work when setting flip dynamically:

` <StylesProvider jss={jss} flip={theme.direction === 'rtl' ? true : false} >`

Apparently `StylesProvider ` memorize the flip value, any idea how this can be solved?

thanks,


@Cyrus-d I confirm the update issue. I'm having a look at it.
Ok, so, the problem is that we only rely on the theme and styleCreator to update the styles. We don't consider the styleOptions. We could work around the problem, with another hack:
```diff
diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.js b/packages/material-ui-styles/src/makeStyles/makeStyles.js
index 150f5d9ec..13f861a2b 100644
--- a/packages/material-ui-styles/src/makeStyles/makeStyles.js
+++ b/packages/material-ui-styles/src/makeStyles/makeStyles.js
@@ -205,10 +205,9 @@ function makeStyles(stylesOrCreator, options = {}) {
     meta: classNamePrefix,
     classNamePrefix,
   };
-  const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';

   return (props = {}) => {
-    const theme = (listenToTheme ? useTheme() : null) || defaultTheme;
+    const theme = useTheme() || defaultTheme;
     const stylesOptions = {
       ...React.useContext(StylesContext),
       ...stylesOptions2,
```

But I don't think that it would truly solve the problem, nor it will improve performance.
It's unlikely we will solve the problem in the near future. This is not a high priority issue. Solving the problem would require to rethink the whole makeStyles logic.
i see, it's not a big deal, it does work when styles returned with a function, i just thought to raise the issue in case there is a fix for it.

thank you for taking time and looking at this issue.

Solution patch:
diff --git a/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js b/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js
--- a/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js
+++ b/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js
@@ -58,7 +58,6 @@ function getStylesCreator(stylesOrCreator) {
       return stylesWithOverrides;
     },
     options: {},
-    themingEnabled,
   };
 }
 
diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.js b/packages/material-ui-styles/src/makeStyles/makeStyles.js
--- a/packages/material-ui-styles/src/makeStyles/makeStyles.js
+++ b/packages/material-ui-styles/src/makeStyles/makeStyles.js
@@ -201,10 +201,9 @@ function makeStyles(stylesOrCreator, options = {}) {
     meta: classNamePrefix,
     classNamePrefix,
   };
-  const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
 
   return (props = {}) => {
-    const theme = (listenToTheme ? useTheme() : null) || defaultTheme;
+    const theme = useTheme() || defaultTheme;
     const stylesOptions = {
       ...React.useContext(StylesContext),
       ...stylesOptions2,


Test patch:
diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
--- a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
+++ b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
@@ -211,7 +211,7 @@ describe('makeStyles', () => {
       assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'makeStyles-root-1' });
       wrapper.setProps({ theme: createMuiTheme() });
       assert.strictEqual(sheetsRegistry.registry.length, 1);
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'makeStyles-root-1' });
+      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'makeStyles-root-2' });
 
       wrapper.unmount();
       assert.strictEqual(sheetsRegistry.registry.length, 0);
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.test.js b/packages/material-ui-styles/src/withStyles/withStyles.test.js
--- a/packages/material-ui-styles/src/withStyles/withStyles.test.js
+++ b/packages/material-ui-styles/src/withStyles/withStyles.test.js
@@ -150,7 +150,7 @@ describe('withStyles', () => {
       assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-1' });
       wrapper.setProps({ theme: createMuiTheme() });
       assert.strictEqual(sheetsRegistry.registry.length, 1);
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-1' });
+      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'Empty-root-2' });
 
       wrapper.unmount();
       assert.strictEqual(sheetsRegistry.registry.length, 0);