CODEWITHSUNDEEP
reactjsmaterial-uimakestyles
NoushadM
NoushadM

Reputation: 121

Why am i unable to override Material UI styles using makeStyle

I am unable to override the material UI Appbar styles unless i use sx inside the component to style or use !important inside makeStyle classes. I didnt want to use sx since i want the component to look neat. My code looks like :

const useStyles = makeStyles({
    navbar: {
        backgroundColor: "#fff ",
        boxShadow: "none"

    }
}) 
export default function Navbar(props) {
    const theme = useTheme();
    const [open, setOpen] = React.useState(false);
    const classes = useStyles(props);
    const handleDrawerOpen = () => {
        setOpen(true);
    };

    const handleDrawerClose = () => {
        setOpen(false);
    }

    return (
        <Box className='section__navbar'>
            <CssBaseline />
            <AppBar position="fixed" open={open} className={classes.navbar}>

                <Typography sx={{ display: "block", width: "100%" }} variant="h6" noWrap component="div">
                    <img className='xerago__logo' src={logo} alt="Xerago Logo" />
                </Typography>
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        onClick={handleDrawerOpen}
                        edge="start"
                        sx={{ display: { md: "none" }, mr: 2, ...(open && { display: 'none' }) }}
                    >
                        <MenuIcon sx={{ backgroundColor: "#5578eb" }} />
                    </IconButton>
                    <Typography sx={{ width: "100%", display: { xs: "none", md: "inline-block" } }} component="div">
                        <ul className='nav__items'>
                            {pages.map((page, i) => (
                                <li key={i} className="link" >
                                    <Link className="single__item" to="/groups">{page}</Link>
                                </li>
                            ))}
                        </ul>
                    </Typography>
                </Toolbar>
            </AppBar>

        </Box >
    );
}

It will be amazing if someone can explain me the best way to override the Material UI styles

Upvotes: 0

Views: 3454

Answers (2)

HIMALAY SHANKAR
HIMALAY SHANKAR

Reputation: 11

Solution 1: Answered above

Everything is right . just have to use class instead of className for Material UI to accept the styles . This solution will also work but will get warnings from react to use className instead of class.

Solution 2: Use StyledEngineProvider and wrap all the component inside it.

import Header from "./components/header";
import TopSection from "views/top-section";

import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
import theme from "utils/theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <StyledEngineProvider injectFirst>
        <Header />
        <TopSection />
      </StyledEngineProvider>
    </ThemeProvider>
  );
}

export default App;

If you haven't created a theme file you can create and use the content according to your requirement.

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: "RobotoMedium",
      textTransform: "none",
    },
  },
  palette: {
    primary: {
      main: "#58F2F0",
    },
    secondary: {
      main: "#58F2F0",
    },
  },
});

export default theme;

Upvotes: 1

NoushadM
NoushadM

Reputation: 121

Everything is right . just have to use class instead of className for Material UI to accept the styles .

<AppBar position="fixed" open={open} class={classes.navbar}>

Upvotes: 0

Related Questions