search

siriwatknp / mui-treasury

A collection of ready-to-use components based on Material-UI
https://mui-treasury.com
MIT License
2.39k stars 150 forks source link

EdgeSidebar not following 'stylis-plugin-rtl' flipping rules correctly! #1196

Open aenawi opened 2 years ago

aenawi commented 2 years ago

Hi

I've created a sample app using pnpm create next-app --typescript.

I was testing the code from Right to Left page, then when I changed the scheme config for leftEdgeSidebar like this:

    leftEdgeSidebar: {
      config: {
        xs: {
          variant: 'temporary',
          width: 256,
        },
        sm: {
          variant: 'persistent',
          width: 256,
          persistentBehavior: 'fit',
        },
      },
    },

The 'EdgeSidebar' component behave wrongly, it was sliding all the way from Left edge of the screen to the Right edge, where it should slide from the right side (attachment: Wrong Behavior)!

However if I do the following:

  1. Set the dir='rtl' property for the <html> tag under pages/_document.tsx.
  2. Remove <CacheProvider value={cacheRtl}> and <div dir="rtl"> tags completely.
  3. Update the scheme config like this: 
    rightEdgeSidebar: {
  config: {
    xs: {
      variant: 'temporary',
      width: 256,
    },
    sm: {
      variant: 'persistent',
      width: 256,
      persistentBehavior: 'fit',
    },
  },
},
  4. Set the property anchor="right" for <EdgeSidebar> component.

Everything seems working as expected, since all components inherits the <html dir="rtl"> correctly. How I knew that is by inserting <ContentMockup /> component inside <Content> where all the children flipped to RTL correctly! (attachment: Right Behavior)

Any hints please?!

Thanks

Right Behavior (using <html dir='rtl'> inside pages/_document.tsx): Right Behavior

Wrong Behavior (using stylis-plugin-rtl): Wrong Behavior

mauro-ni commented 2 months ago

@siriwatknp Hi, I'm writing here because the issue I have may be related to this one.

EdgeSidebar seems not following theme palette mode (I have a problem when selectedTheme is lightTheme): in order to fix I need to force background & color on EdgeSidebar.

Many thanks for your help.

Mauro

In the following example selectedTheme may be lightTheme or darkTheme.

<ThemeProvider theme={selectedTheme}>
    ...
    <Root>
        <ScrollToTop />
        <CssBaseline />
        <Header
            sx={{
                ...
            }}
        >
           ....
        </Header>
        <ThemeProvider theme={darkTheme}>
            <EdgeSidebar
              sx={(theme) => ({
                ...applyEdgeSidebarStyles({
                  theme,
                  config: {
                    xs: {
                      variant: "temporary",
                      width: "256px",
                    },
                    md: {
                      variant: "permanent",
                      width: "256px",
                      collapsible: true,
                      collapsedWidth: "65px",
                    },
                  },
                }),

                // FIX: need to force background & color in order to make it work when in light theme
                background: theme.palette.background.paper,
                color: theme.palette.text.primary,

              })}
            >
                ....
            </EdgeSidebar>
        </ThemeProvider>
        <Content sx={{ py: 2 }}>
             ...
        </Content>
    </Root>
    ...
</ThemeProvider>