I am currently trying to figure out how to map a Grid for each of my "skills" panels for my Portfolio. The skills are being pulled and iterated over from the arrays you see at the top of the file below, here is my code:
import React from "react";
import { makeStyles} from "#material-ui/core/styles";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
import styled from 'styled-components';
import typography from '#material-ui/core/Typography';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
color:'green',
alignContent:"center"
},
paper: {
height: 150,
width: 100
},
}));
const frontEnd =['Django','Reactjs','Javascript','HTML','CSS']
const backEnd =['Python','Typescript','Nodejs','Express']
const databases =['MongoDB','MySQL']
const tools = ['AWS','AWS-CDK','Docker','AWS-Lambda','Figma','Microservices','Kubernetes']
const SpacingGrid = (props) => {
// const [spacing] = React.useState(2);
const classes = useStyles();
return (
<div>
<Grid item xs={12}>
<Body align="center">
Front-End
</Body>
{frontEnd.map((skill)=>(
<Body align="center" key={skill}>
{skill}
</Body>
))}
<Paper className={classes.control}>
<Grid container justify="center">
<Grid item>{props.children}</Grid>
<Grid item> </Grid>
</Grid>
</Paper>
</Grid>
))}
</div>
);
};
export default SpacingGrid;
so I am trying to create a separate panel for each of the arrays and give it a title such as "Front-End Skills", "Back-End Skills". Thank you all for your help!
Related
Hi i've found this https://github.com/Learus/react-material-ui-carousel to use it on my website. But i've encountered 2 problems:
In order to set the autoPlay state, i have to change it to class which leads to unable to use const classes = useStyles() so does anyone know what should i do?
I have 3 jpg photos saved in the img folder under the same directory and i have no idea why the photos cant be loaded in my localhost.
Here is my code:
import React from 'react';
import { createMuiTheme } from '#material-ui/core';
import { ThemeProvider } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import Tooltip from '#material-ui/core/Tooltip';
import Carousel from 'react-material-ui-carousel';
import CarouselSlide from 'react-material-ui-carousel';
import Card from '#material-ui/core/Card';
import CardMedia from '#material-ui/core/CardMedia';
import CardContent from '#material-ui/core/CardContent';
const theme = createMuiTheme ({
palette: {
primary:{
main:'#3c52b2'
}
}
})
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
Button: {
"&:hover": {
backgroundColor: "#fff !important"
}
},
title: {
flexGrow: 1,
},
}));
export default function UMainPage (){
const pictures = [
{image:'./2.jpg', title:'Iu 1'},
{image:'./3.jpg', title:'Iu 2'},
{image:'./4.jpg', title:'Iu 3'}
];
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" className={classes.title}>
清动订馆平台
</Typography>
<Button color="inherit">首页</Button>
<Button color="inherit">历史订单</Button>
<Tooltip disableFocusListener disableTouchListener title="登录账号">
<Button color="inherit">未登录</Button>
</Tooltip>
</Toolbar>
</AppBar>
<Carousel>
{pictures.map(({image, title}) => (
<CarouselSlide key={image}>
<Card>
<CardMedia
image={image}
title={title}
style={{
height: 0,
paddingTop: '25%',
}}
/>
<CardContent>
<Typography>{title}</Typography>
</CardContent>
</Card>
</CarouselSlide>
))}
</Carousel>
</ThemeProvider>
);
}
In order to set autoPlay you should pass it to Carousel like this:
<Carousel autoPlay>
...
</Carousel>
If you want to have ability to change it you should keep in state:
const [autoPlay, setAutoPlay] = useState(true);
You should import your images first and then keep them in the pictures array:
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
...
const pictures = [
{ image: image2, title: "Iu 1" },
{ image: image3, title: "Iu 2" },
{ image: image4, title: "Iu 3" },
];
I have been working with Material UI grid and I am trying to display data in a grid of cards that show in rows as opposed to a single column. My grid currently displays like this stacked in a column(please ignore the size of the cards this is just a zoomed in screenshot):
I would like the grid to display like this in rows as opposed to a single column:
I feel like I'm missing something simple but I'm just not sure why it keeps stacking in a single column. The code is as follows:
import React, { useState, useEffect } from "react"
// components
import Grid from "#material-ui/core/Grid"
import { makeStyles } from "#material-ui/core/styles"
import axios from "axios"
import RepoCard from "../components/RepoCard"
import Container from "#material-ui/core/Container"
// context
const Profile = () => {
const [data, setData] = useState(null)
const fetchGit = () => {
axios
.get(`https://api.github.com/users/rterrell25/repos?`)
.then((res) => {
setData(res.data)
console.log(res.data)
})
.catch((err) => console.log(err))
}
useEffect(() => {
fetchGit()
}, [])
return (
<div style={{ marginTop: 85 }}>
{!data ? (
<h1>Loading...</h1>
) : (
data.map((user) => (
<Container>
<Grid container spacing={4}>
<RepoCard name={user.name} />
</Grid>
</Container>
))
)}
</div>
)
}
export default Profile
the Repo Card Component code:
import React from "react"
import { Link } from "react-router-dom"
// MUI stuff
import Button from "#material-ui/core/Button"
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 CardMedia from "#material-ui/core/CardMedia"
import Grid from "#material-ui/core/Grid"
import Typography from "#material-ui/core/Typography"
const useStyles = makeStyles((theme) => ({
icon: {
marginRight: theme.spacing(2),
},
heroContent: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(8, 0, 6),
},
heroButtons: {
marginTop: theme.spacing(4),
},
cardGrid: {
paddingTop: theme.spacing(8),
paddingBottom: theme.spacing(8),
},
card: {
height: "100%",
display: "flex",
flexDirection: "column",
},
cardMedia: {
paddingTop: "56.25%", // 16:9
},
cardContent: {
flexGrow: 1,
},
footer: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(6),
},
}))
const MovieCard = ({ name }) => {
const classes = useStyles()
return (
<Grid item xs={12} sm={6} md={4}>
<Card className={classes.card}>
<CardMedia
className={classes.cardMedia}
image={"#"}
title='Movie nane'
/>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant='h5' component='h2'>
"Movie name"
</Typography>
<Typography>Genre: Comedy</Typography>
<Typography noWrap>"Movie Summary"</Typography>
</CardContent>
<CardActions>
<Link to={""}>
<Button size='small' color='primary'>
Details
</Button>
</Link>
</CardActions>
</Card>
</Grid>
)
}
export default MovieCard
Change the xs={12} to xs={4}
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
Refer: document of Material-UI Grid
I have a component like below. I want to be able to use a value from the state such as [opacity, setOpacity] = useGlobal('opacity') and have the opacity be the value for tileBody background. What would be the best way to go about this?
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '#material-ui/core/styles';
import Typography from '#material-ui/core/Typography';
import Grid from '#material-ui/core/Grid';
import {CardContent, fade, Hidden} from "#material-ui/core";
import Card from "#material-ui/core/Card";
import { useGlobal, setGlobal, useDispatch } from 'reactn';
/*
options = {
...other options,
tileTransparencyValue: 75,
*/
const useStyles = makeStyles(theme => ({
tile: {
backgroundColor: 'transparent',
},
tileHeader: {
backgroundColor: fade(theme.palette.grey[800], 0.7),
},
tileBody: {
backgroundColor: fade(theme.palette.grey[800], tileTransparencyValue/100),
},
}));
export default function DashTile(props) {
const [options, setOptions] = useGlobal('options');
const {title, content} = props;
const classes = useStyles();
return (
<Grid item lg={4} xs={12}>
<Card className={classes.tile}>
<CardContent className={classes.tileHeader}>
<Typography variant="h5">{title}</Typography>
</CardContent>
<CardContent className={classes.tileBody}>
<Typography variant="content">{content}</Typography>
</CardContent>
</Card>
</Grid>
);
}
You can pass props to your styles like this:
export default function DashTile(props) {
const [options, setOptions] = useGlobal('options');
const [opacity, setOpacity] = useGlobal('opacity')
const {title, content} = props;
const classes = useStyles({opacity})
return (
<Grid item lg={4} xs={12}>
<Card className={classes.tile}>
<CardContent className={classes.tileHeader}>
<Typography variant="h5">{title}</Typography>
</CardContent>
<CardContent className={classes.tileBody}>
<Typography variant="content">{content}</Typography>
</CardContent>
</Card>
</Grid>
);
}
Then you can retrive the props inside the styles like this:
const useStyles = makeStyles(theme => ({
tile: {
backgroundColor: 'transparent',
},
tileHeader: {
backgroundColor: fade(theme.palette.grey[800], 0.7),
},
tileBody: {
backgroundColor: ({opacity}) => fade(theme.palette.grey[800], opacity)
},
}));
Reference: makeStyles
How can we add margin (empty space) between Material-UI Grid items?
Container's spacing attribute only adds padding on items.
import React from "react";
import ReactDOM from "react-dom";
import { Grid } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
backgroundColor: "red"
},
root2: {
backgroundColor: "green"
}
});
function App() {
const classes = useStyles();
return (
<Grid container spacing={2}>
<Grid item xs={6} className={classes.root}>
hi
</Grid>
<Grid item xs={6} className={classes.root2}>
hi
</Grid>
</Grid>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Change xs attribute so that the total is less than 12 in that row to have some space.
Add margin: "auto" or any other margin as you wish to your items.
import React from "react";
import ReactDOM from "react-dom";
import { Grid } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
backgroundColor: "red",
margin: "auto"
},
root2: {
backgroundColor: "green",
margin: "auto"
}
});
function App() {
const classes = useStyles();
return (
<Grid container spacing={2}>
<Grid item xs={5} className={classes.root}>
hi
</Grid>
<Grid item xs={5} className={classes.root2}>
hi
</Grid>
</Grid>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
This is my theme.ts file where I created my Muitheme and my fontfamily
import 'typeface-inconsolata'
import 'typeface-quicksand'
import { createMuiTheme, responsiveFontSizes } from '#material-ui/core'
import indigo from '#material-ui/core/colors/indigo'
import yellow from '#material-ui/core/colors/pink'
import red from '#material-ui/core/colors/red'
const theme = createMuiTheme({
typography: {
fontFamily: 'typeface-inconsolata, typeface-quicksand',
fontSize: 17,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
},
palette: {
primary: indigo,
secondary: red,
error: yellow,
// Used by `getContrastText()` to maximize the contrast between the background and
// the text.
contrastThreshold: 4,
// Used to shift a color's luminance by approximately
// two indexes within its tonal palette.
// E.g., shift from Red 500 to Red 300 or Red 700.
tonalOffset: 0.6,
},
})
export const responsiveTheme = responsiveFontSizes(theme)
This is my App.tsx file where my component is, so I want to change the fonts of the words in the Appbar and in the Grid
import {
AppBar,
Card,
CardHeader,
Container,
createStyles,
Grid,
makeStyles,
Toolbar,
Typography,
} from '#material-ui/core'
import CssBaseline from '#material-ui/core/CssBaseline'
import { ThemeProvider } from '#material-ui/styles'
import React, { FC } from 'react'
import logo from '../icons/logo.svg'
import { responsiveTheme } from '../theme'
const useStyles = makeStyles(theme =>
createStyles({
main: {
height: '90vh',
background: `url(${logo}) no-repeat center / 200px`,
marginTop: theme.spacing(10),
},
})
)
const App: FC = () => {
const classes = useStyles()
return (
<ThemeProvider theme={responsiveTheme}>
<CssBaseline />
<Container maxWidth="lg">
<AppBar color="secondary" position="fixed">
<Toolbar>
<Typography variant="h6" noWrap>
Projektvorlage
</Typography>
</Toolbar>
</AppBar>
<div className={classes.main}>
<Grid container spacing={2} justify="center">
{['Pfannkuchen', 'Pizza', 'Salat', 'Nudeln mit Tomatensauce'].map(
recipe => (
<Grid key={recipe} item xs={12} md={6} lg={4}>
<Card>
<CardHeader title={recipe} />
</Card>
</Grid>
)
)}
</Grid>
</div>
</Container>
</ThemeProvider>
)
}
export default App
So basically I want to change the fonts of the texts but I dont know how to use my fontfamily. There are "variants" but I don't understand what they mean exactly, Im new to react/typescript.
If you want to continue introducing styles via Material-UI, what I would do is create myself in the parent that wraps all the global styles, like the following ones:
globalStyles.styles.tsx
import { createStyles } from "#material-ui/core/styles";
export const globalStyles = (theme: Theme) => createStyles({
"#global": {
body: {
maxHeight: "100vh",
margin: 0,
fontFamily:
},
"#root": {
maxHeight: "100vh",
},
});
app.component.tsx
const AppInner: React.FC<AppProps> = props => { ... };
const App = withStyles(globalStyles)(AppInner);
PD: App component must be inside of <ThemeProvider theme={responsiveTheme}>...</ThemeProvider>