Ubah arah di UI material
const theme = createMuiTheme({
direction: 'rtl',
});
Stormy Starling
const theme = createMuiTheme({
direction: 'rtl',
});//_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>
)
}
}