I'm trying to use the MUI divider in React. However, it doesn't seem to work; I currently have:
import * as React from "react";
import IconButton from "#mui/material/IconButton";
import ShareIcon from "#mui/icons-material/Share";
import ReportGmailerrorredIcon from "#mui/icons-material/ReportGmailerrorred";
import Divider from "#mui/material/Divider";
import "./settings.css";
function Settings() {
return (
<div className="body">
<div className="media_interact">
<div className="media_buttons">
<IconButton size="medium" sx={{ ml: 2 }}>
<ShareIcon fontSize="large" />
</IconButton>
<IconButton size="medium" sx={{ ml: 2 }}>
<ReportGmailerrorredIcon fontSize="large" />
</IconButton>
</div>
<Divider
orientation="vertical"
variant="middle"
flexItem
sx={{ color: "black" }}
/>
Hello
</div>
</div>
);
}
export default Settings;
which, as you can see from the Sandbox, doesn't produce the Divider at all and the Hello text element after:
I'm hoping for some guidance in terms of how to use it?
Related
I was trying to import some icons and for my website but the Material ui documents shows some code which does not allow me to change the existing icon.
import * as React from 'react';
import Box from '#mui/material/Box';
import Drawer from '#mui/material/Drawer';
import CssBaseline from '#mui/material/CssBaseline';
import AppBar from '#mui/material/AppBar';
import Toolbar from '#mui/material/Toolbar';
import List from '#mui/material/List';
import Typography from '#mui/material/Typography';
// import Divider from '#mui/material/Divider';
import ListItem from '#mui/material/ListItem';
import ListItemButton from '#mui/material/ListItemButton';
import ListItemIcon from '#mui/material/ListItemIcon';
import ListItemText from '#mui/material/ListItemText';
import GroupIcon from '#mui/icons-material/Group';
// import InboxIcon from '#mui/icons-material/MoveToInbox';
import MailIcon from '#mui/icons-material/Mail';
import LibraryMusicIcon from '#mui/icons-material/LibraryMusic';
const drawerWidth = 240;
export default function PermanentDrawerLeft() {
return (
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar
position="fixed"
sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}
>
</AppBar>
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="permanent"
anchor="left"
>
<Toolbar />
<Toolbar>
<Typography variant="h5" noWrap component="div">
Available Groups
</Typography>
</Toolbar>
<List>
{['First Room', 'Second Room', 'Third Room'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index === 2 ? <GroupIcon /> : <LibraryMusicIcon /> : <MailIcon /> }
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
<Toolbar>
<Typography variant="h5" noWrap component="div">
Members
</Typography>
</Toolbar>
</Drawer>
<Box
component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
>
<Toolbar />
</Box>
</Box>
);
}
I tried to change the icon for the first element which i was able to do but as soon i try change the icon for the third element the output shows error.
I was expecting that the third icon changes
Upadte
If there need to be 3 different icons for 3 items, it could be:
{index === 0 ? <GroupIcon /> : index === 1 ? <LibraryMusicIcon /> : <MailIcon />}
Or it could be:
{[<GroupIcon />, <LibraryMusicIcon />, <MailIcon />][index]}
Both the above ways should be equivalent.
Original
index starts from 0, so the third item will have an index of 2.
If you prefer every third icon change, it could be:
{(index + 1) % 3 === 0 ? <LibraryMusicIcon /> : <MailIcon />}
But if there is just 3 items to be mapped, it could be as simple as:
{index === 2 ? <LibraryMusicIcon /> : <MailIcon />}
Hope this will help.
I'm completely new to React and been trying a few hours now to link to another component that I've made. I have this log-in form that I want to link to my sign up page once a material ui link is clicked. I've been searching a ton, but I can't just get it to work.
This is my login-component:
import React from 'react';
import {useState} 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 { BrowserRouter, Route, Routes} from 'react-router-dom';
import Grid from '#mui/material/Grid';
import Box from '#mui/material/Box';
import Typography from '#mui/material/Typography';
import Container from '#mui/material/Container';
import { createTheme, ThemeProvider } from '#mui/material/styles';
import Link from '#mui/material/Link';
import RegisterPage from './Register';
import { Link as RouterLink } from "react-router-dom";
const Register = () => (
<BrowserRouter>
<Routes>
<Route exact path="/register" element={<RegisterPage />} />
</Routes>
</BrowserRouter>
);
function LoginCard({ Login, error }) {
const [details, setDetails] = useState({ username: "", password: "" })
const onFormSubmit = (e) => {
e.preventDefault();
Login(details);
}
const theme = createTheme();
function Copyright(props) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Fiin Frisører
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
return(
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" onSubmit={onFormSubmit} noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="username"
label="Username"
name="username"
onChange={e=> setDetails({...details, username: e.target.value})}
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
onChange={e=> setDetails({...details, password: e.target.value})}
/>
<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="https://www.google.com" variant="body2">
Don't have an account yet?
</Link>**
</Grid>
</Grid>
</Box>
</Box>
<Copyright sx={{ mt: 8, mb: 4 }} />
</Container>
</ThemeProvider>
);
};
export default LoginCard;
Once I click the Link that wraps the text "Dont have an account yet?" I want to redirect to another component showing only my Register component.
Been trying to add component props to the link, creating a new function and calling that, using href and to-tag but nothing seems to work. Can anyone help me out?
If you want to link to a page internal to your app then you will need to render the Link component from react-router-dom, i.e. the RouterLink in your code. You can specify this to be the rendered component for the MUI Link component. From here you pass any of the normal RRD Link props, like the to prop for the route you are linking to.
Example:
<Link component={RouterLink} to="register" variant="body2">
Don't have an account yet?
</Link>
I've written the same code everywhere but it doesn't render my buttons. It does render but is not visible. The button are present between the logo and the search input.
There aren't any errors nor build fail to debug the problem.
I tried copying and pasting the code from the second too!
import React from "react";
import { Link } from "react-router-dom";
import { Box, Container, ThemeProvider, Input, useScrollTrigger, Slide, AppBar, Toolbar } from '#mui/material'
import { Button } from "#mui/material";
import customTheme from "./Theme"
function HideOnScroll(props) {
const { children, window } = props;
const trigger = useScrollTrigger({
target: window ? window() : undefined,
});
return (
<Slide appear={false} direction="down" in={!trigger}>
{children}
</Slide>
);
}
const ariaLabel = { 'aria-label': 'description' };
function Navigation(props) {
return (
<Container>
<ThemeProvider theme={ customTheme }>
<HideOnScroll>
<AppBar color={"primary"}>
<Toolbar>
<Box m={1} p={1}>
<Link to=""><img src="/static/brand-logo.svg" alt="brand-logo" /></Link>
</Box>
<Box m={1} p={1}>
<Button variant="outlined" style={{ borderRadius: 20 }} href="/">Home</Button>
<Button variant="outlined" style={{ borderRadius: 20 }} href="/blog">Blogs</Button>
<Button variant="outlined" style={{ borderRadius: 20 }} href="/create-blog">Create</Button>
</Box>
<Box m={1} p={1}>
<Input color={"secondary"} placeholder="Can't search :)" inputProps={ariaLabel} />
</Box>
</Toolbar>
</AppBar>
</HideOnScroll>
<Toolbar />
</ThemeProvider>
</Container>
);
}
export default Navigation;
Another button code which works
import React from "react";
import { Grid, Divider, Typography, Button } from "#mui/material";
import InstagramIcon from '#mui/icons-material/Instagram';
import LinkedInIcon from '#mui/icons-material/LinkedIn';
import GitHubIcon from '#mui/icons-material/GitHub';
export default function Home(props) {
return(
<Grid container spacing={4} justifyContent="center" alignItems="center" color={"primary"}>
<Grid item xs={12} sm={6} lg={4}>
<Typography variant="h1" component="div" gutterBottom>A painting of my life.</Typography>
<Button size="large" variant="outlined" style={{ borderRadius: 50, fontSize: 40 }} href="/blog">Peek My Diary</Button>
</Grid>
</Grid>
);
}
I am trying to use this ready free templet for a login page the problem is the source code is different and I had to adapt it to work there is this issue with this import in the src code
#mui/material/
the I had to convert to
#material-ui/
for it to work..
but the problem is my page looks like the following no colors and the theme didn't load for some reason the sx is not working any idea what is the issue here and why the src code is different yet working ?
A. source code
B. material-ui free template view
Source Singup page
My Signup page rendered on next.js localhost
import React from 'react';
import Avatar from '#material-ui/core/Avatar';
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
import Link from '#material-ui/core/Link';
import Grid from '#material-ui/core/Grid';
import Box from '#material-ui/core/Box';
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
import Typography from '#material-ui/core/Typography';
import Container from '#material-ui/core/Container';
import { createTheme, ThemeProvider } from '#material-ui/core/styles';
function Copyright(props) {
return (
<Typography variant='body2' color='text.secondary' align='center' {...props}>
{'Copyright © '}
<Link color='inherit' href='https://material-ui.com/'>
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const theme = createTheme();
function SignIn() {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// eslint-disable-next-line no-console
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
return (
<ThemeProvider theme={theme}>
<Container component='main' maxWidth='xs'>
<CssBaseline />
<Box
sx={{
marginTop: 8,
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' onSubmit={handleSubmit} noValidate 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>
</Box>
</Box>
<Copyright sx={{ mt: 8, mb: 4 }} />
</Container>
</ThemeProvider>
);
}
export default SignIn;
Try to use yours TextField with InputProps with color: "inherit"
<TextField
margin='normal'
required
fullWidth
id='email'
label='Email
Address'
name='email'
autoComplete='email'
autoFocus
InputProps={{
style: {
color: "inherit"
}
}}
/>
I would like to use a circular progress indicator from Material-UI in the header of my app.
But I just dont know how to fit nicely a download icon from Material Icons inside so that progress bar will move around the icon. Here is what I have now:
and I want to achieve this:
I tried to place icon with absolute positioning, but probably there is a better idea
import React from "react";
import ReactDOM from "react-dom";
import CircularProgress from "#material-ui/core/CircularProgress";
import Button from "#material-ui/core/Button";
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import VerticalAlignBottomIcon from '#material-ui/icons/VerticalAlignBottom';
function CircularStatic() {
const [completed, setCompleted] = React.useState(0);
React.useEffect(() => {
function progress() {
setCompleted((prevCompleted) =>
prevCompleted >= 100 ? 0 : prevCompleted + 10
);
}
const timer = setInterval(progress, 1000);
return () => {
clearInterval(timer);
};
}, []);
return (
<div>
<Button variant="contained" color="primary">
<CircularProgress variant="static" value={completed} color="inherit">
</CircularProgress>
</Button>
</div>
);
}
function ButtonAppBar() {
return (
<AppBar position="static" style={{ backgroundColor: 'teal' }}>
<Toolbar>
<IconButton edge="start" color="inherit">
<VerticalAlignBottomIcon />
<CircularStatic/>
</IconButton>
</Toolbar>
</AppBar>
);
}
ReactDOM.render(<ButtonAppBar />, document.getElementById("root"));
I customized a little, the Material-UI documentation example here
function CircularProgressWithContent(props) {
return (
<Box position="relative" display="inline-flex">
<CircularProgress />
<Box
top={0}
left={0}
bottom={0}
right={0}
position="absolute"
display="flex"
alignItems="center"
justifyContent="center"
>
<Typography variant="caption" component="div" color="textSecondary">
{props.content}
</Typography>
</Box>
</Box>
);
}
And to use it :
<CircularProgressWithLabel content={<LockOutlinedIcon />} />
It's perfectible but it works well for your use case.