I am using Mui and Material kit theme to build a project..
I am using the theme provided by Material kit and i am also using custom css to modify some features of the default components provided by Material kit, but I am unable to overrride the styles.. So right now i am stuck with default theme provided by Material kit
But recently i added another component in my app, and i noticed that whenever i open that component the overall styling of the app changes, which to my surprise were the custom styles i provided, which were'nt working before..
My question is-
What might be the reason for this behaviour
Any help would be greatly appreciated
This is my App.js
import './App.css';
// #mui material components
import { ThemeProvider } from "#mui/material/styles";
import CssBaseline from "#mui/material/CssBaseline";
// Material Kit 2 React themes
import theme from "assets/theme";
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import HomeSkeleton from 'components/Drawer/Drawer';
import SignInCover from 'components/sign-in/Signin';
import DSAManagement from 'components/DSAManagement/DSAManagement';
import LeadManagement from 'components/LeadManagement/LeadManagement';
import ResponsiveDrawer from 'components/Drawer/ResponsiveDrawer';
import NotificationsComp from 'components/notifications/NotificationsComp';
import Notifications from 'components/common/Notifications/Notifications';
function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<Routes>
<Route exact path='/' element={<SignInCover/>} />
<Route exact path='/res' element={<ResponsiveDrawer/>}></Route>
<Route exact path='/home' element={<HomeSkeleton/>} >
<Route exact path='dsa-management' element={<DSAManagement />}/>
<Route exact path='lead-management' element={<LeadManagement />}/>
<Route exact path='payout-management' element={<DSAManagement />}/>
<Route exact path='product-management' element={<DSAManagement />}/>
<Route exact path='notifications' element={<NotificationsComp />}/>
<Route exact path='user-notifications' element={<Notifications />} />
</Route>
</Routes>
</BrowserRouter>
</ThemeProvider>
);
}
export default App;
And this is the troubling component
import React from 'react'
import { TextareaAutosize, Toolbar } from '#material-ui/core'
import { Box } from '#material-ui/core'
import { Icon } from '#material-ui/core'
import { IconButton } from '#material-ui/core'
import { AccessTime, Bookmark } from '#material-ui/icons'
import { Button, Grid } from '#mui/material'
import NotificationTabs from './NotificationTabs'
const NotificationsComp = () => {
return(
<>
<Grid container>
<Grid item md={12}>
<Toolbar disableGutters sx={{padding: 0}}>
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
<IconButton size="medium" aria-label="filter" color="inherit">
<Icon>filterList</Icon>
</IconButton>
<Button variant="text" color='black'
sx={{
display: 'inline-block',
fontSize: '0.8rem', p:0,
mr: '1rem',
letterSpacing: 0}}>
Filter
</Button>
<Button variant="text" color='black'
sx={{
display: 'inline-block',
fontSize: '0.8rem', p:0,
mr: '1rem',
letterSpacing: 0}}>
(500 DSA selected)
</Button>
</Box>
</Toolbar>
</Grid>
<Grid item md={12}>
<TextareaAutosize style={{height: '10rem',width: '100%', padding: '1rem'}} placeholder={'Write Notification Text here'}></TextareaAutosize>
<Toolbar disableGutters>
<Box sx={{ display: { xs: 'none', md: 'flex' }, px: 0 }} >
<IconButton size="medium" aria-label="show 4 new mails" color="inherit">
<Icon>send</Icon>
</IconButton>
<Button variant="text" color='black'
sx={{
display: 'inline-block',
fontSize: '0.8rem', p:0,
mr: '1rem',
letterSpacing: 0}}>
Send Notification
</Button>
<IconButton
size="medium"
aria-label="show 17 new notifications"
color="inherit"
>
<AccessTime/>
</IconButton>
<Button variant="text" color='black'
sx={{
display: 'inline-block',
fontSize: '0.8rem', p:0,
mr: '1rem',
letterSpacing: 0}}>
Schedule
</Button>
<IconButton
size="medium"
aria-label="save notifications"
color="inherit"
>
<Bookmark/>
</IconButton>
<Button variant="text" color='black'
sx={{
display: 'inline-block',
fontSize: '0.8rem', p:0,
mr: '1rem',
letterSpacing: 0}}>
Save
</Button>
</Box>
</Toolbar>
</Grid>
<Grid item md={12}>
<NotificationTabs/>
</Grid>
</Grid>
</>
)
}
export default NotificationsComp
Solution
Reason ->
The overall css was changing because the component in question had different import paths for mui components than the paths that were set in the rest of the components, app-wide.
Explaination ->
Take for example if ->
In rest of the components Box was imported from '#mui/material/Box, but in NotificationsComp component it was imported from '#material-ui/core. So when this component loaded it introduced some more css classes which overrided the existing css classes for these components and hence the change in css.
So setting the same paths for mui components in the <NotificationsComp/> as the rest of the app fixed the problem.
Related
App.JS file
import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
Link,
Switch,
} from "react-router-dom"
import SignIn from './pages/SignIn.jsx';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<SignIn />}/>
<Route path="/sign-up">
Signup
</Route>
</Routes>
</Router>
);
}
export default App;
SignIn.jsx file
import * as React from 'react';
import Avatar from '#mui/material/Avatar';
import Button from '#mui/material/Button';
import CssBaseline from '#mui/material/CssBaseline';
import TextField from '#mui/material/TextField';
import FormControlLabel from '#mui/material/FormControlLabel';
import Checkbox from '#mui/material/Checkbox';
import Link from '#mui/material/Link';
import Paper from '#mui/material/Paper';
import Box from '#mui/material/Box';
import Grid from '#mui/material/Grid';
import LockOutlinedIcon from '#mui/icons-material/LockOutlined';
import Typography from '#mui/material/Typography';
import { createTheme, ThemeProvider } from '#mui/material/styles';
function Copyright(props: any) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const theme = createTheme();
export default function SignInSide() {
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
return (
<ThemeProvider theme={theme}>
<Grid container component="main" sx={{ height: '100vh' }}>
<CssBaseline />
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: 'url(https://source.unsplash.com/random)',
backgroundRepeat: 'no-repeat',
backgroundColor: (t) =>
t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
<Copyright sx={{ mt: 5 }} />
</Box>
</Box>
</Grid>
</Grid>
</ThemeProvider>
);
}
The output in the browser is a completely blank page. What I was expecting was a simple login and signup template for the user. I used source code from a material ui sign in side template, from the website https://mui.com/material-ui/getting-started/templates/.
The errors in the jsx file (keyword any on line 16, React.FormEvent line 32) are caused by a "Type annotations can only be used in TypeScript files error". So I tried to change the file to a .tsx, Which solved the errors in the file but still did not give me the output I was looking for in my browser.
In the App function in the App.js file I tried replacing keyword Switch with routes, but I did not see the change I was looking for.
The webpage is supposed to output a simple SignIn and Signup template. The tutorial I am following is https://medium.com/#sanderdebr/building-a-workout-tracker-with-react-and-firebase-part-2-authentication-220e5b863d5b. His code is outdated which is why im running into problems, Im using this tutorial as a prototype project to familiarize me with new technologies react, firebase, material ui.
As mentioned in reactrouter docs if you are using v6 + you shouldn't use Switch anymore (I think they remove it entirely and that is why the last error pops up). The <Switch> component was replaced by <Routes>.
Also as you can see in the previous link form reactrouter docs instead of childrens you should use the property element={...} from <Route
(so something like
<Route path="/sign-up" element={<Signup />} />
. Or to match your case something like <Route path="/sign-up" element={"Signup"} />)
There might be other issues as well (this were the ones that stood out). But without a minimal reproducible example is kind of hard to tell
Here is my *Navbar
import React, { useState } from "react";
import { Layout, Menu } from "antd";
import {
MenuUnfoldOutlined,
MenuFoldOutlined,
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
} from "#ant-design/icons";
import { Link } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const Navbar = (props) => {
const [collapsed, setCllapsed] = useState(false);
const toggle = () => {
setCllapsed(!collapsed);
};
return (
<div>
<Layout id="components-layout-demo-custom-trigger">
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
<Menu.Item key="1" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/">
Dashboard
</Link>
</Menu.Item>
<Menu.Item key="2" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/groups">
Groups
</Link>
</Menu.Item>
<Menu.Item key="3" icon={<VideoCameraOutlined />}>
<Link style={{ textDecoration: "none" }} to="/tutors">
Tutors
</Link>
</Menu.Item>
<Menu.Item key="4" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/students">
Students
</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(
collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
{
className: "trigger",
onClick: toggle,
}
)}
</Header>
<Content
className="site-layout-background"
style={{
margin: "24px 16px",
padding: 24,
minHeight: 280,
}}
>
{props.children}
</Content>
</Layout>
</Layout>
</div>
);
};
export default Navbar;
In this example I was using <Menu.Item></Menu.Item> component from antd . But it stopped working when clicked once. It changed onclick function. After adding from react-router-dom, I am having trouble with SelectedKeys of Antdesign's Layout. Before Link component of react-router-dom selectedKeys was working when you click one time, but after adding Link component, SelectedKeys is working when double clicked. How can I solve it? I need this should work once. Anyone can help me?
So I'm a newbie when it comes to React and thought to get familiar with the concepts utilizing mui. I'm creating a nav bar and one of the features is to have a search bar that is initially collapsed and expand once the search icon is pressed. This will also hide the typography element. My issue seems that no matter if I set flexgrow for both collapse or the text input that's being encapsulated the element doesn't seem to grow despite the extra space. I also observed when I set the width of the element using vw it adjusts but the right icons and search bar begin to overlap after minimizing it to a certain point. I wonder if this is a styling issue or whether if transition is incapable of doing this, if it's a styling issue how do I get the text input to expand the needed space?
Navbar.js
import React, { useState } from "react";
import {
AppBar,
Drawer,
Box,
IconButton,
List,
ListItemButton,
ListItemText,
Toolbar,
TextField,
Typography,
Collapse,
} from "#mui/material";
import MenuIcon from "#mui/icons-material/Menu";
import PersonOutlineOutlinedIcon from "#mui/icons-material/PersonOutlineOutlined";
import SearchOutlinedIcon from "#mui/icons-material/SearchOutlined";
import ShoppingBagOutlinedIcon from "#mui/icons-material/ShoppingBagOutlined";
import { createTheme } from "#mui/material";
const Navbar = () => {
const [drawer, setDrawer] = useState(false);
const [drawer2, setDrawer2] = useState(false);
const [clicked, setClicked] = useState(false);
const theme = createTheme({
typography: {
fontFamily: ["Abril Fatface", "cursive"].join(","),
},
});
return (
<AppBar position="fixed" sx={{ height: 70 }} className="navbar">
<Toolbar>
<IconButton onClick={() => setDrawer(!drawer)} className="id">
<MenuIcon fontSize="large"></MenuIcon>
</IconButton>
<Drawer open={drawer} onClose={() => setDrawer(!drawer)}>
<Box sx={{ width: 400, backgroundColor: "red" }}>
<List>
<ListItemButton>
<ListItemText primary="HI" />
</ListItemButton>
</List>
</Box>
</Drawer>
<Collapse orientation="horizontal" in={clicked} timeout={100} unmountOnExit>
<TextField sx={{ flexGrow: 2 }} />
</Collapse>
<Typography
component="a"
variant="h4"
theme={theme}
className="item"
sx={{
color: "black",
flexGrow: 2,
textAlign: "center",
display: clicked ? "none" : "block",
}}
>
APPSTUFF
</Typography>
<IconButton className="id">
<PersonOutlineOutlinedIcon fontSize="large"></PersonOutlineOutlinedIcon>
</IconButton>
<IconButton className="id" onClick={() => setClicked(!clicked)}>
<SearchOutlinedIcon fontSize="large"></SearchOutlinedIcon>
</IconButton>
<IconButton className="id" onClick={() => setDrawer2(!drawer2)}>
<ShoppingBagOutlinedIcon fontSize="large"></ShoppingBagOutlinedIcon>
</IconButton>
<Drawer
open={drawer2}
onClose={() => setDrawer2(!drawer2)}
anchor="right"
>
<Box sx={{ width: 400, backgroundColor: "red" }}>
<List>
<ListItemButton>
<ListItemText primary="HI" />
</ListItemButton>
</List>
</Box>
</Drawer>
</Toolbar>
</AppBar>
);
};
export default Navbar;
NavbarStyle.css
.id {
color: black;
margin-top: 0.5%;
display: flex;
flex-grow: 0;
}
.navbar {
width: 100vw;
box-shadow: none;
background-color: white;
}
I am using react router dom v6 and want to implement a logic where the sidebar will be available across all the components in my. Currently whenever i try to click any in side bar the side bar is vanishing.
I want to keep the side bar across all the components in my app.
Side Bar available
Sidebar gone
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter as Router, Routes, Route,Navigate,Link} from
'react-router-dom'; import Login from
'../src/components/Login/LoginPage'; import Test from
'../src/components/test/Test'; import Homepage from
'../src/components/homepage/HomePage'; import Scheduler from
'../src/components/scheduler/Scheduler'; import Classroom from
'../src/components/classroom/Classroom'; import Assignment from
'../src/components/assignment/Assignment'; import Meeting from
'../src/components/meetings/Meetings'; import ReportCard from
'../src/components/reportcard/ReportCard'; import SideMenuBar from
'../src/components/sidemenubar/SideMenuBar'; ReactDOM.render(
<Router>
<Routes>
<Route path='/' element={<Login />} />
<Route path='/api/v1/testpath' element={<Test />} />
{/* Sidebar Routes */}
<Route path="/api/v1/app/userHome" exact element={<Test />} />
<Route path="/api/v1/app/schedule" exact element={<Scheduler />} />
<Route path="/api/v1/app/myclassroom" exact element={<Classroom />} />
<Route
path="/api/v1/app/myassignments"
exact
element={<Assignment />}
/>
<Route path="/api/v1/app/mymeetings" exact element={<Meeting />} />
<Route path="/api/v1/app/viewreports" exact element={<ReportCard />} />
</Routes>
</Router>,
document.getElementById('root')
);
Sidebar.js
import {
ListItemIcon,
ListItemText,
List,
Divider,
Drawer,
Avatar,
Box,
ListItemButton,
} from "#mui/material";
import { makeStyles } from "#mui/styles";
import HomeIcon from "#mui/icons-material/Home";
import WatchLaterIcon from "#mui/icons-material/WatchLater";
import GroupsIcon from "#mui/icons-material/Groups";
import AssignmentOutlinedIcon from "#mui/icons-material/AssignmentOutlined";
import AssessmentOutlinedIcon from "#mui/icons-material/AssessmentOutlined";
import LogoutOutlinedIcon from "#mui/icons-material/LogoutOutlined";
import MeetingRoomOutlinedIcon from "#mui/icons-material/MeetingRoomOutlined";
import Logo from "./logo.png";
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";
import Homepage from "../homepage/HomePage";
import Scheduler from "../scheduler/Scheduler";
import Classroom from "../classroom/Classroom";
import Assignment from "../assignment/Assignment";
import ReportCard from "../reportcard/ReportCard";
import Meeting from "../meetings/Meetings";
const drawerWidth = 350;
const useStyles = makeStyles({
page: {
background: "#f9f9f9",
width: "100%",
},
root: {
display: "flex",
},
drawer: {
width: drawerWidth,
},
drawerPaper: {
width: drawerWidth,
borderRadius: "2%",
},
listitem: {
"&:hover": {
fontWeight: "fontWeightBold",
background: "#f9f9f9",
},
},
navlink: {
textDecoration: "inherit",
color: "inherit",
},
});
export default function Sidemenubar() {
const classes = useStyles();
return (
<Box sx={{ display: "flex" }}>
<Divider />
<Drawer
className={classes.drawer}
variant="permanent"
classes={{ paper: classes.drawerPaper }}
anchor="left"
>
{/*App Logo */}
<Avatar
src={Logo}
alt="404"
sx={{ width: 100, height: 100, alignSelf: "center", margin: 1 }}
/>
{/*Menu Items */}
<List component="nav">
<Link to="/api/v1/app/userHome" className={classes.navlink}>
<ListItemButton
sx={{
"&:hover": {
fontWeight: "bold",
boxShadow: 1,
background: "#6D62DA",
},
}}
>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItemButton>
</Link>
<Divider />
<Link to="/api/v1/app/schedule" className={classes.navlink}>
<ListItemButton
sx={{
"&:hover": {
fontWeight: "bold",
boxShadow: 1,
background: "#6D62DA",
},
}}
>
<ListItemIcon>
<WatchLaterIcon />
</ListItemIcon>
<ListItemText primary="Scheduler" />
</ListItemButton>
</Link>
<Divider />
</List>
</Drawer>
<Routes>
<Route path='/api/v1/app/userHome' element={<Homepage />}></Route>
<Route path='/api/v1/app/schedule' element={<Scheduler />}></Route>
</Routes>
</Box>
);
}
HomePage.js
import React from 'react';
import { Grid } from "#mui/material";
import SideMenuBar from '../sidemenubar/SideMenuBar';
import HomePage from '../homepage/HomePage';
import Scheduler from '../scheduler/Scheduler';
import {BrowserRouter as Router,
Routes, Route,Navigate,Link} from 'react-router-dom';
class Test extends React.Component{
render(){
return (
<Grid container>
<Grid item md={4}>
<SideMenuBar />
</Grid>
<Grid item md={8}>
<HomePage />
</Grid>
</Grid>
)
}
}
export default Test;
If you want to render a sidebar on every route/page then I suggest:
Using Layout Wrapper Component and Outlet
Create a layout container component that renders the Sidebar component and an Outlet into the respective grid columns. Render the page routes nested into the layout.
import { Outlet } from 'react-router-dom';
import SideMenuBar from '../sidemenubar/SideMenuBar';
const PageLayout = () => (
<Grid container>
<Grid item md={4}>
<SideMenuBar />
</Grid>
<Grid item md={8}>
<Outlet /> // <-- nested routes rendered here
</Grid>
</Grid>
);
index.js
<Router>
<Routes>
<Route path="/" element={<PageLayout />} >
<Route index element={<Login />} />
<Route path="/api/v1/app/userHome" element={<UserHome />} />
<Route path="/api/v1/app/schedule" element={<Scheduler />} />
<Route path="/api/v1/app/myclassroom" element={<Classroom />} />
<Route
path="/api/v1/app/myassignments"
element={<Assignment />}
/>
<Route path="/api/v1/app/mymeetings" element={<Meeting />} />
<Route path="/api/v1/app/viewreports" element={<ReportCard />} />
</Route>
</Routes>
</Router>
Using Wrapper Component and children Prop
An alternative would be to have the PageLayout component render its children instead, and wrap the Routes component.
const PageLayout = ({ children }) => (
<Grid container>
<Grid item md={4}>
<SideMenuBar />
</Grid>
<Grid item md={8}>
{children}
</Grid>
</Grid>
);
index.js
<Router>
<PageLayout>
<Routes>
<Route path="/ element={<Login />} />
<Route path="/api/v1/app/userHome" element={<UserHome />} />
<Route path="/api/v1/app/schedule" element={<Scheduler />} />
<Route path="/api/v1/app/myclassroom" element={<Classroom />} />
<Route
path="/api/v1/app/myassignments"
element={<Assignment />}
/>
<Route path="/api/v1/app/mymeetings" element={<Meeting />} />
<Route path="/api/v1/app/viewreports" element={<ReportCard />} />
</Routes>
</PageLayout>
</Router>
I am importing the Card component from MUI but the component does not have any style.
import * as React from "react";
import Box from "#mui/material/Box";
import Card from "#mui/material/Card";
import CardActions from "#mui/material/CardActions";
import CardContent from "#mui/material/CardContent";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
const bull = (
<Box
component="span"
sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
>
•
</Box>
);
export default function BasicCard() {
return (
<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="div">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
adjective
</Typography>
<Typography variant="body2">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
);
}
What the component is supposed to look like:
MUI Component
What the component actually looks like:
Imported Component
How can I add styling?
You probably have text-align: center set somewhere in the parent. This usually happens when you create a react project with a template like CRA that has some CSS files like this:
.App {
text-align: center;
}
You can fix it by finding and removing that text-align property or reset it in your Card:
<Card sx={{ minWidth: 275, textAlign: "initial" }}>
If what you mean is the dark background, you can achieve it by setting the theme mode to dark:
import { ThemeProvider, createTheme } from "#mui/material/styles";
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Card sx={{ minWidth: 275 }}>
{...}
</Card>
</ThemeProvider>