/Javascript/Next.js/Next js material ui rtl direction

Next js material ui rtl direction

//_app.js
import { createTheme } from '@material-ui/core'
import App from 'next/app'
import { ThemeProvider } from 'styled-components'
import { create } from 'jss'
import rtl from 'jss-rtl'
import { StylesProvider, jssPreset } from '@mui/styles'
import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'
import rtlPlugin from 'stylis-plugin-rtl'
// Create rtl cache
const cacheRtl = createCache({key: 'muirtl',stylisPlugins: [rtlPlugin]})
// Create rtl theme
const theme = createTheme({direction: 'rtl'})
const jss = create({
  plugins: [...jssPreset().plugins, rtl()],
})
export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <ThemeProvider theme={theme}>
        <StylesProvider jss={jss}>
          <CacheProvider value={cacheRtl}>
            <Component {...pageProps} />
          </CacheProvider>
        </StylesProvider>
      </ThemeProvider>
    )
  }
}
//_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
import stylisRTLPlugin from 'stylis-plugin-rtl'

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet()

    const page = renderPage(
      (App) => (props) =>
        sheet.collectStyles(
          <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
            <App {...props} />
          </StyleSheetManager>
        )
    )

    const styleTags = sheet.getStyleElement()

    return { ...page, styleTags }
  }
  render() {
    return (
      <Html dir='rtl'>
        <Head>{this.props.styleTags}</Head>
        <body dir='rtl'>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Change direction in material ui

const theme = createMuiTheme({
  direction: 'rtl',
});

Source: material-ui.com

Similar codes

0 vote145 views1 answer
Pass object to query on Router.push NextJs
Javascript Next.js
1 vote234 views2 answers
History.push in nextjs
Javascript Next.js
8 votes232 views2 answers
Create next js app yarn
Javascript Next.js
1 vote243 views1 answer
Next js script tag
Javascript Next.js
0 vote132 views1 answer
Nextjs svg npm
Javascript Next.js
0 vote124 views1 answer
How to create a nextjs app from a template
Javascript Next.js
0 vote125 views1 answer
Hydration in next js
Javascript Next.js
0 vote170 views2 answers
How to reload page with router next js
Javascript Next.js
0 vote90 views2 answers
Mdb nextjs
Javascript Next.js
0 vote127 views1 answer
Get cuurent route name nextjs
Javascript Next.js