1

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

J.Naude
  • 125
  • 1
  • 4
  • 11

2 Answers2

0

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

Or can use classes property in Mui Component. classes

Anjala Dilhara
  • 1
  • 1
  • So I dont know what is different from the class example you shared compared to what I have done? The style is applied in the browser Insepector but the problem is that it is getting overridden by the default styling of the Link component – J.Naude May 05 '20 at 11:59
0

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

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