CODEWITHSUNDEEP
cssreactjsmaterial-uijssreact-snap
J.Naude
J.Naude

Reputation: 155

Material UI - MakeStyles Overridden

Good day, im attempting to add custom CSS to a material UI App Bar but all the styles i apply using the makeStyles function is overridden by the default Material UI styling. The only fix is to apply !important to my styling but I dont see this as a viable workaround. Following the docs it states to use the StylesProvider component to configure the CSS injection order but this also hasnt proven any results. Please any help will be greatly appreciated here is an example of what ive attempted to do.

Index.js

import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import 'typeface-roboto';
import { StylesProvider } from '@material-ui/core/styles';

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
 hydrate(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
} else {
 render(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
}

serviceWorker.unregister();

Component that uses MakeStyles

const navBarStyles = makeStyles((theme) => ({
  link: {
    margin: theme.spacing(1, 1.5)
  }
}));

export default function NavbarComponent() {
  const classes = navBarStyles();
    return (
      <AppBar position="static" elevation={0}>
        <Toolbar className="flex-wrap">
          <Typography variant="h6" color="inherit" noWrap className="flex-grow-1">
            test
          </Typography>
          <nav>
            <Link variant="button" color="textPrimary" href="#" className={classes.link}>
              Features
            </Link>
          </nav>
        </ToolBar>
      </AppBar>
)}

Note im using React-Snap with this project so im not sure if that is the reason it is breaking, https://www.npmjs.com/package/react-snap

Upvotes: 1

Views: 2528

Answers (2)

T. Al Rashid
T. Al Rashid

Reputation: 923

Use sx={{}} property directly in the navbar.
Something like this

<AppBar position='static' sx={{ borderRadius: '9px', color="inherit" }}> 
   //Other components
</AppBar>

Upvotes: 0

Anjala Dilhara
Anjala Dilhara

Reputation: 1

You can override the MUI styles using theme provider check theme provider

Or can use classes property in Mui Component. classes

Upvotes: 0

Related Questions