I'm trying to use #mui/material/Grid layout for a use case,
In my Report component, I want to have the Bar and Line charts in one block
and the Doughnut and PolarArea charts in another,
I tried applying CSS by adding, style = {{display: "inline-block"}},
But the UX looks like this -
By code is like this on a high level -
App.js -
function App() {
return (
<Router>
<Container style={{backgroundColor: '#F3F4F6'}}>
<Grid container spacing={0.5} >
<Grid item xs={12}>
<Routes>
<Route path='/' element={<SignIn />}/>
<Route path='/dashboard' element={<Dashboard/>}/>
</Routes>
</Grid>
</Grid>
</Container>
</Router>
);
}
Dashboard.js component -
const Dashboard = () => {
return (<>
<Grid item xs={12}>
<Table/>
</Grid>
<Grid item xs={12}>
<Report/>
</Grid>
</>
)}
Report.js component -
export function Report() {
return <>
<Grid item xs={6}>
<Bar options={barChartOptions} data={barChartData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<Line options={areaChartOptions} data={areaChartData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<Doughnut options={doughnutOptions} data={doughnutChatData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<PolarArea options={polarAreaOptions} data={polarAreaData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={12}>
<Bar options={groupedBarOptions} data={groupedBarData} style={{backgroundColor: 'white'}}/>
</Grid>
</>
}
You should wrap up the Grid items with a Grid container.
export function Report() {
return <>
<Grid container>
<Grid item xs={6}>
<Bar options={barChartOptions} data={barChartData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<Line options={areaChartOptions} data={areaChartData} style={{backgroundColor: 'white'}}/>
</Grid>
</Grid>
<Grid container>
<Grid item xs={6}>
<Doughnut options={doughnutOptions} data={doughnutChatData} style={{backgroundColor: 'white'}}/>
</Grid>
<Grid item xs={6}>
<PolarArea options={polarAreaOptions} data={polarAreaData} style={{backgroundColor: 'white'}}/>
</Grid>
</Grid>
<Grid item xs={12}>
<Bar options={groupedBarOptions} data={groupedBarData} style={{backgroundColor: 'white'}}/>
</Grid>
</>
}
Related
I'm new to reactjs. I have created a dropdown for a company list and want to get values. I still couldn't be able to get values from the dropdown. I've tried several methods of retrieving data but not able to do that. can anyone help me to get values? Here is some of my code.
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize">
Country
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={country} onChange={handleSetCountry}>
<MenuItem value="...">country</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
Here is my whole code.
/**
=========================================================
* Soft UI Dashboard PRO React - v4.0.0
=========================================================
* Product Page: https://material-ui.com/store/items/soft-ui-pro-dashboard/
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { useState } from "react";
// prop-type is a library for typechecking of props
import PropTypes from "prop-types";
// #mui material components
import Grid from "#mui/material/Grid";
import Select from "#mui/material/Select";
import MenuItem from "#mui/material/MenuItem";
// Soft UI Dashboard PRO React components
import Switch from "#mui/material/Switch";
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftInput from "components/SoftInput";
// NewUser page components
import FormField from "layouts/pages/new/new-company/components/FormField";
import { DateTimePicker } from "#material-ui/pickers";
import { distance } from "chroma-js";
function General({ formData }) {
const [country, setCountry] = useState("...");
const handleSetCountry = (event) => setCountry(event.target.value);
const { formField, values, errors, touched } = formData;
const { comNumber, address1, address2, city, state, postcode, additional, phone, phone1, fax, web } = formField;
const { comNumber: comNumberV, address1: address1V, address2: address2V, city: cityV, state: stateV, postcode: postcodeV, additional: additionalV,
phone: phoneV, phone1: phone1V, fax: faxV, web: webV} = values;
const [selectedDate, handleDateChange] = useState(new Date());
const [rememberMe, setRememberMe] = useState(false);
const handleSetRememberMe = () => setRememberMe(!rememberMe);
return (
<SoftBox>
<SoftTypography variant="h5" fontWeight="bold">
General
</SoftTypography>
<SoftBox mt={1.625}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={comNumber.type}
label={comNumber.label}
name={comNumber.name}
value={comNumberV}
placeholder={comNumber.placeholder}
error={errors.comNumber && touched.comNumber}
success={comNumberV.length > 0 && !errors.comNumber}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={address1.type}
label={address1.label}
name={address1.name}
value={address1V}
placeholder={address1.placeholder}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={address2.type}
label={address2.label}
name={address2.name}
value={address2V}
placeholder={address2.placeholder}
/></Grid>
<Grid item xs={12} sm={6}>
<FormField
type={city.type}
label={city.label}
name={city.name}
value={cityV}
placeholder={city.placeholder}
/>
{/* <FormField
type={city.type}
label={city.label}
name={city.name}
value={cityV}
placeholder={city.placeholder}
error={errors.city && touched.city}
success={cityV.length > 0 && !errors.city}
/> */}
</Grid>
</Grid>
{/* <Grid item xs={6} sm={3}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize"
>
State
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={state} onChange={handleSetState}>
<MenuItem value="...">state</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
<Grid item xs={6} sm={3}>
<FormField
type={zip.type}
label={zip.label}
name={zip.name}
value={zipV}
placeholder={zip.placeholder}
error={errors.zip && touched.zip}
success={zipV.length > 0 && !errors.zip}
/>
</Grid>
</Grid> */}
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={state.type}
label={state.label}
name={state.name}
value={stateV}
placeholder={state.placeholder}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={postcode.type}
label={postcode.label}
name={postcode.name}
value={postcodeV}
placeholder={postcode.placeholder}
error={errors.postcode && touched.postcode}
success={postcodeV.length > 0 && !errors.postcode}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize">
Country
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={country} onChange={handleSetCountry}>
<MenuItem value="...">country</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={additional.type}
label={additional.label}
name={additional.name}
value={additionalV}
placeholder={additional.placeholder}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={phone.type}
label={phone.label}
name={phone.name}
value={phoneV}
placeholder={phone.placeholder}
error={errors.phone && touched.phone}
success={phoneV.length > 0 && !errors.phone}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={phone1.type}
label={phone1.label}
name={phone1.name}
value={phone1V}
placeholder={phone1.placeholder}
error={errors.phone1 && touched.phone1}
success={phone1V.length > 0 && !errors.phone1}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={fax.type}
label={fax.label}
name={fax.name}
value={faxV}
placeholder={fax.placeholder}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={web.type}
label={web.label}
name={web.name}
value={webV}
placeholder={web.placeholder}
/>
</Grid>
</Grid>
{/* <Grid container spacing={3}>
<Grid item xs={12} >
<FormField
type={distance.type}
label={distance.label}
name={distance.name}
value={distanceV}
placeholder={distance.placeholder}
/>
</Grid>
</Grid>
<SoftBox display="flex" alignItems="center">
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
<SoftTypography
variant="button"
fontWeight="regular"
onClick={handleSetRememberMe}
sx={{ cursor: "pointer", userSelect: "none" }}
>
Company Opted Out From Surveys
</SoftTypography>
</SoftBox> */}
</SoftBox>
</SoftBox>
);
}
// typechecking props for Address
General.propTypes = {
formData: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
};
export default General;
I need to get dropdown values. Can anyone help me to solve this?
First of all, you should really create a small example in Codesandbox and post it here...
Anyway,
As far as I can see you have two different dropdowns/select components (state and country).
You get no value from neither of them ? The Country one seems to be okay, but the State is missing its event handler (?).
What does a simple console.log output show?:
const handleSetCountry = (event) => {
console.log(event.target.value);
setCountry(event.target.value);
}
Also, try without the
input={<SoftInput />}
and see what happens
I'm having an issue with the latest version of Mui. I'm using a Theme to change the default styling of a text field input the error code has something to do with "./node_modules/#mui/material/FormLabel/FormLabel.js/FormLabelRoot<" I've got the following dependencies
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/material": "^5.0.1",
If anyone has an idea I'd love to hear it :)
import React, { useState } from "react"
import { Button, createTheme, Grid, TextField, Tooltip } from "#mui/material"
import { ThemeProvider } from "#mui/system"
import { AddRounded, CalendarToday, Phone, Email, SearchOutlined, People, Work } from "#mui/icons-material"
import { orange } from "#mui/material/colors"
function App() {
//logic
const [contacts, setContacts] = useState([])
const [addFormData, setAddFormData] = useState({
name: "", email: "", phone: "", dateCreated: "", area: ""
})
/* search reflects the value of the googleesque, search bar. */
const [search, setSearch] = useState("")
/* refrlcts the */
const [searchResults, setSearchResults] = useState([])
const handleAddFormChange = (e) => {
e.preventDefault()
const fieldName = e.target.getAttribute("name")
console.log(fieldName)
let fieldValue = e.target.value
console.log(fieldValue)
const newFormData = { ...addFormData }
newFormData[fieldName] = fieldValue
setAddFormData(newFormData)
}
const handleAddFormSubmit = (e) => {
e.preventDefault()
const newContact = {
name: addFormData.name,
email: addFormData.email,
phone: addFormData.phone,
dateCreated: addFormData.dateCreated,
area: addFormData.area,
split: addFormData.split
}
const newContacts = [...contacts, newContact]
setContacts(newContacts)
}
const handleSearch = (e) => {
e.preventDefault()
setSearch(e.target.value)
if (search !== "") {
const newContactList = contacts.filter((contact) => {
console.log(Object.values(contact).join(" ").toLowerCase())
return Object.values(contact).join(" ").toLowerCase().includes(search.toLowerCase())
})
console.log(search)
console.log(Object.values(contacts).join(" ").toLowerCase())
setSearchResults(newContactList)
} else {
setSearchResults(contacts)
}
}
const theme = createTheme({
palette: {
primary: {
// Purple and green play nicely together.
main: orange[500],
},
},
});
return (
<>
<ThemeProvider theme={theme}>
<Grid container spacing={1} alignItems="center" >
<Grid item>
<SearchOutlined />
</Grid>
<Grid item style={{ marginBottom: "15px", marginTop: "15px" }} >
<TextField type="text" variant="outlined" label="Search" onChange={handleSearch} />
</Grid>
</Grid>
<div >
{/* Main Container with soacing between pairs set to (3) */}
<Grid container spacing={3} >
{/* First pair, people icon + name input */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* icon */}
<Tooltip title="Name" placement="bottom" arrow>
<People />
</Tooltip>
</Grid>
<Grid item>
{/* input */}
<TextField label="Name" variant="outlined" id="name" name="name" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
{/* Second pair */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* icon */}
<Tooltip title="what's your name" placement="bottom" arrow>
<Work />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="Area" variant="outlined" color="colME" id="area" name="area" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
{/* Third Pair */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="name#example.com" placement="bottom" arrow>
<Email />
</Tooltip>
</Grid>
<Grid item>
{/* input */}
<TextField label="Email" variant="outlined" id="email" name="email" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="Ex:(0049)15208513630" placement="bottom" arrow>
<Phone />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="phone" variant="outlined" id="dateCreated" name="phone" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="Format:dd/mm/yyyy" placement="bottom" arrow>
<CalendarToday />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="Date" variant="outlined" id="dateCreated" name="dateCreated" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
</Grid>
<Button style={{ marginBottom: "15px", marginTop: "15px", }} onClick={handleAddFormSubmit} variant="contained" startIcon={<AddRounded />}>
Add
</Button>
</div>
</ThemeProvider>
{/* if there less than 1 character in the search bar render the normal contacts, if not render only the contacts that match the search input... */}
{/* <ContactList contacts={search.length < 1 ? contacts : searchResults} key={contacts.id} /> */}
</>
);
}
export default App;
OP solved their problem, but for those like me that had a similar issue, be sure to check these few things. I'm experiencing these issues since I've upgraded our code-base to the latest version of Material UI.
The issue appears when you use a color or variant prop value not supported in a given component, usually Button, IconButton, or TextField.
Previously color="default" was just fine, but I realized that default was no longer supported. It's current equivalent is inherit.
If you want to support a custom color, you can create a theme that supports that. Read here: Adding new colors (mui.com)
I have a paper element (div with A4 size), displaying informations enterred by the user (using Context API in Reactjs).
What I want is, in case the paper element is full of text, add another paper and display the remaining informations in it.
this is my code.
<Paper>
<div class="page" data-size="A4">
<Grid container xs={12} direction="column" justify="center" >
<Typography className={classes.title} variant="h5">Experiences </Typography>
<personalInfo.Consumer>
{( {experience} ) => (
experience.map((exp,i) => {
return(
<div key={i}>
<Grid container xs={12} spacing={false}>
<Grid xs={3}>
<Typography className={classes.dates}>
{exp.startdate}-{exp.enddate}<br/>
{exp.city},{exp.country}
</Typography>
</Grid>
<Grid xs={8}>
<Typography >
<h4>{exp.job}</h4>
{exp.employer}
<br/>
{exp.description}
</Typography>
</Grid>
</Grid>
</div>
)})
)}
<personalInfo.Consumer>
</Grid>
</div>
</Paper>```
I'm learning using Material UI Grid and I want to add a blank column (like padding from the right of the first element) on the right side of a column without using padding.
Consider the code :
import React from 'react';
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
import { makeStyles } from '#material-ui/core/styles';
const ExampleGridComponent = () => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
const classes = useStyles();
return (
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>)
}
export default ExampleGridComponent;
It look like this :
How can we put a blank column on the right of all the elements (brown color in the picture) ?
Wrap your item grids with row and column.
<Grid container spacing={3}>
<Grid item xs={9}>
<Grid container>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={3}>
</Grid>
</Grid>
Refer to:
Document of Material UI Grid
Nested grid items: issue
import React from "react";
import "./styles.css";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
import { makeStyles } from "#material-ui/core/styles";
const App = () => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
const classes = useStyles();
return (
<>
<Grid container>
<Grid item xs={8}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={4}>
<Grid item xs={12}>
</Grid>
</Grid>
</Grid>
</>
);
};
export default App;
I'm trying to achieve a two column layout, both of them equal height and each taking half of the screen. Picture explains it better, here is one.
The not working code is as follows:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import CssBaseline from "#material-ui/core/CssBaseline";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
alignItems: "stretch"
},
column: {
flexDirection: "column"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
export default props => {
const classes = useStyles();
return (
<>
<CssBaseline />
<Grid container className={classes.root}>
{/* COLUMN ONE */}
<Grid container item className={classes.column}>
<Grid item xs={6}>
<Paper className={classes.paper}>1: xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>1: xs=6</Paper>
</Grid>
<Grid container item>
<Grid item xs={3}>
<Paper className={classes.paper}>1: xs=3 left</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>1: xs=3 right</Paper>
</Grid>
</Grid>
</Grid>
{/* COLUMN TWO */}
<Grid container item className={classes.column}>
<Grid item xs={6}>
<Paper className={classes.paper}>2: xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>2: xs=6</Paper>
</Grid>
</Grid>
</Grid>
</>
);
};
Obligatory codesandbox is here.
Could someone explain me what am I doing wrong here?
There's a bug with Material UI way of laying out nested grid containers, here. The workaround - found by #londonoliver - is to nest containers inside the grid items:
<Grid container direction="row">
<Grid item>
<Grid container direction="column">
<Grid item>1</Grid>
<Grid item>2</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>3</Grid>
<Grid item>4</Grid>
</Grid>
</Grid>
</Grid>