Hello there! I'm currently facing a challenge with adding custom CSS to a material UI App Bar. Despite using the makeStyles function, all of my styles are being overridden by the default Material UI styling. The only solution I have found so far is to use !important in my styling, but I don't consider this a suitable workaround. According to the documentation, it suggests using the StylesProvider component to configure the CSS injection order, however, this has not yielded any positive results. Any assistance on this matter would be greatly appreciated. Here is an example of what I have attempted:
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 utilizing 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>
)}
Please note that I am using React-Snap in this project, so I am unsure if that may be causing any issues: https://www.npmjs.com/package/react-snap