• 1402/01/08

مشکل چپ چین بودن scrollbar در پروژه portfolio :

 

سلام وقت بخیر

در پروژه portfolio که برای یادگیری MUI پیاده سازی کردید،مشکلی در scrollbar برخوردم و مشکل اینه که scrollbar در سمت چپ مرورگر قرار میگیره وقتی که پروژه راست چین بشه جستجوی زیادی کردم و حتی css رو دستکاری کردم ولی تاثیری نداشت.

عکس scrollbar که مشکل داره:

فایل theme.js:

import { createTheme } from "@mui/material";
import { faIR } from "@mui/material/locale";

export const lightTheme = createTheme({
    direction: "rtl",
    palette: {
        mode: "light",
        primary: {
            main: "#8be9fd",
        },
        secondary: {
            main: "#bd93f9",
        },
    },
    typography: {
        fontFamily: "tanha,Vazirmatn, Roboto",
    },
    faIR,
});

export const darkTheme = createTheme({
    direction: "rtl",
    palette: {
        mode: "dark",
        primary: {
            main: "#8be9fd",
        },
        secondary: {
            main: "#bd93f9",
        },
    },
    typography: {
        fontFamily: "tanha,Vazirmatn, Roboto",
    },
    faIR,
});

فایل css اصلی پروژه:

@font-face {
    font-family: "Roboto";
    src: url("../public/fonts/Roboto-Regular.woff2") format("woff2"),
        url("../public/fonts/Roboto-Regular.woff") format("woff"),
        url("../public/fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../public/fonts/Vazirmatn-Regular.woff2") format("woff2"),
        url("../public/fonts/Vazirmatn-Regular.woff") format("woff"),
        url("../public/fonts/Vazirmatn-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "tanha";
    src: url("../fonts/Tanha.eot") format("embedded-opentype"),
        url("../fonts/Tanha.woff2") format("woff2"),
        url("../fonts/Tahna.woff") format("woff"),
        url("../fonts/Tanha.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    /* -ms-overflow-style: none; */
}

فایل MailLayout.jsx:

import { CacheProvider } from "@emotion/react";
import { HelmetProvider } from "react-helmet-async";
import { ThemeProvider } from "@mui/material";
import createCache from "@emotion/cache";
import { prefixer } from "stylis";
import rtlPlugin from "stylis-plugin-rtl";
import { darkTheme, lightTheme } from "./theme";
import Grid from "@mui/material/Unstable_Grid2";

const cacheRTL = createCache({
    key: "muirtl",
    stylisPlugins: [prefixer, rtlPlugin],
});

const MainLayout = ({ children, mode }) => {
    const theme = mode === "dark" ? darkTheme : lightTheme;
    return (
        <CacheProvider value={cacheRTL}>
            <ThemeProvider theme={theme}>
                <HelmetProvider>
                    <Grid container sx={{ height: "100vh" }}>
                        {children}
                    </Grid>
                </HelmetProvider>
            </ThemeProvider>
        </CacheProvider>
    );
};

export default MainLayout;

 

  • 1402/01/10
  • ساعت 13:59

سلام دوست من

به خاطر مشکلات راستچین کردن هست در پروژه اسکرول بار رو مخفی کردم که در دوره هست چطور

میتونید با دادن css مشکل رو برطرف کنید 

توسط DevTools ببینید در کدوم بخش هست و چه کلاسی داره

یا به صورت گلوبال 

#scroll{
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;}

#scroll div{
    direction:ltr;
}

به این صورت تست کنید ببینید مشکل برطرف میشه ؟


logo-enamadlogo-samandehi