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
You can override the MUI styles using theme provider
check theme provider
Or can use classes property in Mui Component. classes
Use sx={{}} property directly in the navbar.
Something like this
<AppBar position='static' sx={{ borderRadius: '9px', color="inherit" }}>
//Other components
</AppBar>
Related
for some reason my NextJS page transition with framer-motion doesn't seem to work. I followed many tutorials and did a lot of research and it still doesn't work. Here's my _app.tsx code.
import '../styles/globals.css'
import '../styles/ui.css'
import '../fonts/define.css'
import { AppProps } from 'next/app'
import Layout from '../layouts/dashboard'
import Sidebar from '../components/Sidebar'
import { AnimatePresence, motion } from 'framer-motion'
const App = ({ Component, pageProps }: AppProps) => {
return <main>
<Sidebar/>
<AnimatePresence>
<motion.div initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}} className="content">
<Component {...pageProps} />
</motion.div>
</AnimatePresence>
</main>
}
export default App
When I switch between routes the transition just doesn't fire. It only fades in on initial load, then opacity: 1 style is applied to .content div and that's it.
Thank you for your help!
I figured it out. I needed to add key attribute to the <motion.div> div. Read more here https://www.framer.com/docs/animate-presence/#unmount-animations
This might have a quick answer. I am starting to learn Material UI and want try its grid examples, but coding below mentions that compilation rejects as NOTFOUND .. Could not locate a CSS file to load to try these examples.. Without the className parameter, i do not see any outline of the GRID, so may be these css 'classes.root' hold the formatting options. Appreciate your kind help,
function App() {
return (
<div className={classes.root}> ????
<Grid container spacing={3}>
<Grid item xs={12}>
You need to use makeStyles
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
root: {
backgroundColor: 'red',
color: props => props.color,
},
});
function App(props) {
const classes = useStyles(props);
return (
<div className={classes.root}>
// ...
</div>
);
}
I am using Radium library for inline styling in react . Using it works fine for other components but i am having issues with Material-UI components. When i hover my mouse over the Paper , it doesn't change the color to green . What's wrong here ? How do I fix this ?
import React, { Component, Fragment } from 'react';
import { Grid, GridList, Paper, ListItem, List, ListItemIcon, ListItemText } from '#material-ui/core';
import { connect } from 'react-redux';
import Radium from 'radium';
class AchievementsHome extends Component {
render() {
return <>
<Grid container alignItems="center" direction="column">
<h1>Achievements</h1>
<Paper
style={{backgroundColor:'red' , ':hover':{backgroundColor:'green' }}
>
<h1>Hi</h1>
</Paper>
</Grid>
</>
}
}
const mapStateToProps = (state) => {
return {
achievements: state.achievements
}
}
export default connect(mapStateToProps)(Radium(AchievementsHome));
With Material UI external styles ( so styles not directly from the Material UI library ) hardly ever work, to change the color on hover you will have to set a theme as explained in the Themes section of the docs
First grab the import withStyles and define a theme.
import { withStyles } from "#material-ui/core/styles";
const customStyles = theme => ({
root: {
backgroundColor: "red",
"&:hover": {
backgroundColor: "green"
}
}
});
Than define a new component that is wrapped with withStyles:
const CustomPaper = withStyles(customStyles)(Paper);
In your render use the component you defined:
<CustomPaper
/>
Hope this helps.
Material UI provides its own way of styling using CSS in JS (JSS). It provides a withStyles higher order component and a withTheme and lets you style at a global theme level. You can also pass class names for some components for custom styling.
You do not need to use Radium to style Material UI components.
Also your CSS selector for hovering needs to include the parent CSS selector:
const paperStyle = {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'green'
}
}
return (
<Paper styles={paperStyle}>
<Typography variant="h1">Hi</Typography>
</Paper>
);
Strange behaviour, when I try to make an appbar with this code:
import React, { Component } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
export default class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<AppBar title="Title"/>
</div>
</MuiThemeProvider>
);
}
}
The result gives me a stacked appbar:
I have absolutly no idea why it does that and did not find any similar issue. I am running on a fresh Meteor instance with React and Material-UI installed via meteor npm install material-ui
EDIT: After investigation, it seems the problem is that the appbar does not have display:flex. Yet, it is impossible to add it manually with style={{display:'flex'}} (nothing changes).
I know this is old, but in case anyone sees this, the way to do this is to nest a <Toolbar /> inside the <AppBar />.
<AppBar /> docs
One quick and dirty fix: <AppBar title="Title" className="appBar" />
And in main.css:
.appBar{
display:flex;
}
Weird behaviour though.
I am just starting with meteor/flow-router/react-mounter and am running into an issue setting the theme for a component in Material-ui.
In Material-UI v 0.15.0 they no longer set the default them to lightBaseTheme so it has to be set at creation.
Here is a sample component.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
class Navbar extends React.Component {
childContextTypes: {
muiTheme: React.PropTypes.object.isRequired
}
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
render() {
return (<AppBar
title="Title"
iconElementLeft={<IconButton><Navigationclose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><NavigationMoreVert /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
}
/>);
}
}
export default Navbar;
Can anyone help me set the theme for a component using Material-UI, or have a working example
Thanks in advance.
Look at this simple working example