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>
Related
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.
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 new in React and I am trying to align the component at a particular place but I am not able to do so.
import React from "react";
import "./styles.css";
import { Typography, Container, Grid, Button } from "#material-ui/core";
import useStyles from "./styles";
function Home() {
const classes = useStyles;
return (
<div className={classes.root}>
<Grid container>
<Grid item sm={6} xs={12}>
<Typography variant="h3" color="textPrimary" gutterBottom>
Hello, there.
</Typography>
<Typography variant="h5" paragraph>
I need to put this in the centre of the shaded region.
</Typography>
</Grid>
</Grid>
<div>
<Grid item sm={3} xs={6}>
<Button variant="contained" color="primary" disableElevation>
download
</Button>
</Grid>
</div>
</div>
);
}
I am using useStyles Hooks to do so.
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
top: "50%"
}
}));
export default useStyles;
But it is not working, is there a way to solve this?
It's not clear what you want to achieve, but I think this article about flex layout will help you understand how to position elements.
and try the following maybe it's what you want:
import React from "react";
import "./styles.css";
import { Typography, Container, Grid, Button } from "#material-ui/core";
function Home() {
return (
<Grid container style={{
justifyContent: "center"
}}>
<Grid container style={{
backgraoundColor: "blue",
maxWidth: "700px",
alignItems: "center",
justifyContent: "center"
}}>
<Typography variant="h3" color="textPrimary" gutterBottom>
Hello, there.
</Typography>
<Typography variant="h5" paragraph>
I need to put this in the centre of the shaded region.
</Typography>
<Button variant="contained" color="primary" disableElevation>
download
</Button>
</Grid>
</Grid>
);
}
Wrap your content into a div and apply following styles to it
shaded_region{
display:flex,
justify-content:"center",
}
I develop reactjs app and it works fine, but When I refresh it with F5 key or refresh button, it's not working. I check the client console and the error is like this Uncaught SyntaxError: Unexpected token '<'
But in server-side console, there are no errors in it. I don't know why it is working like this.
It only shows white page.
I uploaded my full code on CodeSandbox. You can check all of my codes and problem in there.
The problem is only in /auth/login page
https://codesandbox.io/s/livetoday-9qgh8?fontsize=14
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 { makeStyles } from "#material-ui/core/styles";
import Container from "#material-ui/core/Container";
// import "typeface-roboto";
import {
GoogleLoginButton,
GithubLoginButton
} from "react-social-login-buttons";
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{"Copyright © "}
<Link color="inherit" href="/">
Live Today
</Link>{" "}
{new Date().getFullYear()}
{"."}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
"#global": {
body: {
backgroundColor: theme.palette.common.white
}
},
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1)
},
submit: {
margin: theme.spacing(3, 0, 2)
}
}));
export default function SignIn() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Currently local login is not supported"
name="email"
autoComplete="email"
disabled
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
disabled
>
Sign In
</Button>
</form>
<a
href="/auth/google"
style={{ color: "inherit", textDecoration: "none" }}
>
<GoogleLoginButton />
</a>
<a
href="/auth/github"
style={{ color: "inherit", textDecoration: "none" }}
>
<GithubLoginButton />
</a>
</div>
<Box mt={8}>
<Copyright />
</Box>
</Container>
);
}
Im using Material UI Next in a React project. I have the Card component which has an image(Card Media) and text(Card Text) inside it. I also have a button underneath the text. My question is..how to make the whole card clickable? ie. Whether a user presses on the card text, or the card image or the button, it should trigger the onClick event which I call on the button.
Update for v3 — 29 of August 2018
A specific CardActionArea component has been added to cover specifically this case in version 3.0.0 of Material UI.
Please use the following solution only if you are stuck with v1.
What you probably want to achieve is a Card Action (see specification) on the top part of the card.
The Material Components for Web library has this as its first usage example for the Card Component.
You can easily reproduce that exact behaviour by composing MUI Card* components with the mighty ButtonBase component. A running example can be found here on CodeSandbox: https://codesandbox.io/s/q9wnzv7684.
The relevant code is this:
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Typography from '#material-ui/core/Typography';
import ButtonBase from '#material-ui/core/ButtonBase';
const styles = {
cardAction: {
display: 'block',
textAlign: 'initial'
}
}
function MyCard(props) {
return (
<Card>
<ButtonBase
className={props.classes.cardAction}
onClick={event => { ... }}
>
<CardMedia ... />
<CardContent>...</CardContent>
</ButtonBase>
</Card>
);
}
export default withStyles(styles)(MyCard)
Also I strongly suggest to keep the CardActions component outside of the ButtonBase.
With Material UI 4.9.10, this works.
<Card>
<CardActionArea href="https://google.com">
<CardContent>
<Typography>Click me!</Typography>
</CardContent>
</CardActionArea>
</Card>
If you're using react router, this also works.
<Card>
<CardActionArea component={RouterLink} to="/questions">
<CardContent>
<Typography>Click me!</Typography>
</CardContent>
</CardActionArea>
</Card>
We can also use Link tag to make the whole Card component clickable and for navigation
import { Link } from 'react-router-dom';
function myCard() {
return (
<Link to={'/give_your_path'}>
<Card>
<Card text="This is text"/>
</Card>
</Link>
);
}
You could add an onClick={clickFunction} to the containing div of the card that links to the same function as the button.
Here is the solution that worked for us, thanks to https://stackoverflow.com/a/50444524/192092
import { Link as RouterLink } from 'react-router-dom'
import Link from '#material-ui/core/Link'
<Link underline='none' component={RouterLink} to='/your-target-path'>
<Card>
<CardActionArea>
...
</CardActionArea>
</Card>
</Link>
Just wrap the whole thing in the Material CardActionArea component. Everything inside of it will be clickable.
<CardActionArea>
<CardMedia>
.......Image Stuff
</CardMedia>
<CardContent>
.......Content
</CardContent>
</CardActionArea>
Using NextJS for routing, these two approaches worked for me.
Wrap the <CardActionArea> with a (NextJS) <Link> component:
import Link from 'next/link'
<Card>
<Link href='/your-target-path' passHref>
<CardActionArea>
...
</CardActionArea>
</Link>
</Card>
Use the effect useRouter to push the route on click:
import { useRouter } from 'next/router'
const router = useRouter()
<Card>
<CardActionArea onClick={() => {router.push('/your-target-path')}}>
...
</CardActionArea>
</Card>
Note that with this second approach, your browser won't recognize the URL, i.e., the activity bar (that appears on hover) won't be populated.
In MUI 5.0 itcan be done by CardActionArea component
export default function ActionAreaCard() {
return (
<Card sx={{ maxWidth: 345 }}>
<CardActionArea>
<CardMedia
component="img"
height="140"
image="/static/images/cards/contemplative-reptile.jpg"
alt="green iguana"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
</Card>
);
}
Just add onPress props in your card
<Card
onPress = {() => {console.log('onclick')}}
style={styles.item}
status="basic"
header={(headerProps) =>
this.renderItemHeader(headerProps, item)
}>
<Text>{item.description}</Text>
</Card>
Just use onClick event like this.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import Button from '#material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
card: {
cursor: "pointer",
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
function App() {
const classes = useStyles();
const clickMe = (event) => {
console.log(event);
}
return (
<div className={classes.root}>
<Card className={classes.card} onClick={(event) =>
{clickMe(event)}}>
<CardContent>
<h4>test</h4>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</div>
);
}
export default App;
In MUI5:
Put the card in a <Box /> then make the card an <a> tag component.
<Box component='a' href='/dashboard' sx={{ textDecoration: 'none' }}>
<Card sx={{ height: '200px', cursor: 'pointer'}}>
<CardContent>
//CardContent
</CardContent>
</Card>
</Box>
Add styles like:
Remove text Decoration since you have added <a> tag
Give your card the preferred height
Change the cursor to pointer on hover over the card