I want to increase the size of the stepper . also want to add a horizontal line before the initial step content. how it would be possible here I am attaching my code . I have done adding width and height properties. but Its not worked. just stuck with this. how the customization is possible on this stepper component. need help. I am new to react.js and MUI.
<Stepper activeStep={activeStep} orientation="vertical">
{steps.map((step, index) => (
<Step key={step.label}>
<StepLabel
optional={
index === 2 ? (
<Typography variant="caption">Last step</Typography>
) : null
}
>
{step.label}
</StepLabel>
<StepContent>
<Box sx={{ mb: 2 }}>
<div>
<Button
variant="contained"
onClick={handleNext}
sx={{ mt: 1, mr: 1 }}
>
{index === steps.length - 1 ? 'Finish' : 'Continue'}
</Button>
<Button
disabled={index === 0}
onClick={handleBack}
sx={{ mt: 1, mr: 1 }}
>
Back
</Button>
</div>
</Box>
</StepContent>
</Step>
))}
</Stepper>
{activeStep === steps.length && (
<Paper square elevation={0} sx={{ p: 3 }}>
<Typography>All steps completed - you're finished</Typography>
<Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
Reset
</Button>
</Paper>
)}
</Box> ```
Perhaps you could add a custom css to your webpage :
.MuiStepLabel-labelContainer span {
font-size: xx-large;
}
You can adjust to your desired font size by changing the "font-size" value.
You can use a Theme.
Like so:
import { createTheme } from "#mui/material";
const theme = createTheme({typography: {fontSize: 20}});
function App(){
...
return (
<>
<ThemeProvider theme={theme}>
<Stepper ...
</Stepper>
</ThemeProvider>
...
</>
}
The lines in between are a bit of. I could not find a way to prevent this.
Related
Here is the code and the output it's pretty self-explanatory: I am trying to build a responsive layout and for some reason the button group will bleed out of the container and even get bigger when the screen size decreases.
<Container className="container">
<Grid container>
<Grid item xs={12} md={12} lg={6}>
<Chessboard
position={tour.fen}
isDraggablePiece={isDraggable}
onPieceDrop={onDrop}
customArrows={arrows}
onSquareClick={dropPiece}
onMouseOverSquare={mouseOver}
onMouseOutSquare={mouseOut}
customSquareStyles={{ ...options }}
customBoardStyle={{
borderRadius: "4px",
boxShadow: "0 5px 15px rgba(0, 0, 0, 0.5)",
}}
customDarkSquareStyle={{ background: "#90a2ad" }}
customLightSquareStyle={{ background: "#dfe3e6" }}
/>
<ButtonGroup variant="contained" className="controls">
{isFirst ? (
<Button onClick={randomStart}>Random Start</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button
disabled={tour.completed !== null}
onClick={finishTour}
>
Complete Tour
</Button>
) : null}
{tour.completed !== null ? (
<Button onClick={visualiseComplete}>
Visualise
</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button
onClick={() =>
setArrows(genArrows(tour.visitedStr))
}
>
Show path
</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button onClick={undo}>Undo</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button onClick={reset}>Reset</Button>
) : null}
</ButtonGroup>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Moves tour={tour} />
</Grid>
</Grid>
{/* <CompletedPanel tour={tour} impossible={impossible} /> */}
</Container>
Desktop version
Mobile version
I expect the the button group to fit inside the container and become stacked vertically
Perhaps make a responsive size value with useTheme and useMediaQuery from Material UI, and try with one or more of the following approaches.
Simplified live demo: stackblitz
Import the helper hooks:
import { useTheme } from '#mui/material/styles';
import useMediaQuery from '#mui/material/useMediaQuery';
In the component, create responsive condition:
const theme = useTheme();
// 👇 Customize this with preferred breakpoints
const matches = useMediaQuery(theme.breakpoints.up('sm'));
In the output, try one or more of these approaches for responsive values:
<ButtonGroup
// 👇 Make size based on responsive value
size={matches ? "medium" : "small"}
variant="contained"
aria-label="outlined primary button group"
// 👇 Define maxWidth for the group
sx={{ maxWidth: "100%" }}
// 👇 Conditional shorter text
>
<Button>{`${matches ? "complete " : ""}tour`}</Button>
<Button>{`${matches ? "show " : ""}path`}</Button>
<Button>undo</Button>
<Button>reset</Button>
</ButtonGroup>
As an alternative option, perhaps also consider to make the ButtonGroup layout horizontal when in smaller screen size:
<ButtonGroup
size={matches ? "medium" : "small"}
// 👇 Conditional orientation
orientation={matches ? "horizontal" : "vertical"}
variant="contained"
aria-label="outlined primary button group"
sx={{ maxWidth: "100%" }}
>
<Button>complete tour</Button>
<Button>show path</Button>
<Button>undo</Button>
<Button>reset</Button>
</ButtonGroup>
I have a multi-step component on which I would like to have a form in one of the steps, so when the user tries to go to the next step I could validate the input and submit the form. So far I have this code, but I haven't figured how to validate and submit the code from the outside button.
I would appreciate your help.
import CostumForm from './NannySignupComponents/InformacionPersonal';
const steps = ['Shipping address', 'Payment details', 'Review your order'];
const theme = createTheme();
export default function Checkout() {
function getStepContent(step) {
switch (step) {
case 0:
return (
<CostumForm/>
);
case 1:
return ;
case 2:
return ;
default:
throw new Error('Unknown step');
}
}
const [activeStep, setActiveStep] = useState(0);
const handleNext = () => {
setActiveStep(activeStep + 1);
this.setState({submitFromOutside: true})
};
const handleBack = () => {
setActiveStep(activeStep - 1);
};
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<AppBar
position="absolute"
color="default"
elevation={0}
sx={{
position: 'relative',
borderBottom: (t) => `1px solid ${t.palette.divider}`,
}}
>
<Toolbar>
<Typography variant="h6" color="inherit" noWrap>
Company name
</Typography>
</Toolbar>
</AppBar>
<Container component="main" maxWidth="sm" sx={{ mb: 4 }} >
<Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
<Typography component="h1" variant="h4" align="center">
Checkout
</Typography>
<Stepper activeStep={activeStep} sx={{ pt: 3, pb: 5 }}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<React.Fragment>
{activeStep === steps.length ? (
<React.Fragment>
<Typography variant="h5" gutterBottom>
Thank you for your order.
</Typography>
<Typography variant="subtitle1">
Your order number is #2001539. We have emailed your order
confirmation, and will send you an update when your order has
shipped.
</Typography>
</React.Fragment>
) : (
<React.Fragment>
{getStepContent(activeStep)}
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
{activeStep !== 0 && (
<Button onClick={handleBack} sx={{ mt: 3, ml: 1 }} >
Back
</Button>
)}
<Button
variant="contained"
onClick={handleNext}
sx={{ mt: 3, ml: 1 }}
>
{activeStep === steps.length - 1 ? 'Place order' : 'Next'}
</Button>
</Box>
</React.Fragment>
)}
</React.Fragment>
</Paper>
</Container>
</ThemeProvider>
);
}
I want to change the color of my thumbs up button in Material UI. I'd like to change it to white, but right now it's blue. This is my code:
<div className={styles.like_dislike}>
<IconButton
size="medium"
sx={{ ml: 2 }}
>
{likeStatus === 1
? <ThumbUpIcon onClick={handleLike} color='primary'/>
: <ThumbUpOffAltIcon onClick={handleLike} color="primary" />
}
</IconButton>
<IconButton
size="medium"
sx={{ ml: 2 }}
>
{likeStatus === -1
? <ThumbDownIcon onClick={handleDislike} />
: <ThumbDownOffAltIcon onClick={handleDislike} />
}
</IconButton>
</div>
I have a section in my CSS file modifying MuiIcon-colorPrimary, as that is what MUI specifies to modify for icons using the primary color:
.like_dislike.MuiIcon-colorPrimary {
color: #fafafa
}
Am I doing something wrong?
Sorry, this is my first post and I'm new to React.
I have this code below and I use steps for the buttons, however I would like the save button to be the submit type and only it, thanks for your help now.
<React.Fragment>
<React.Fragment>
{activeStep === steps.length ? (
<React.Fragment>
<Typography variant="h5" gutterBottom>
Saved
</Typography>
</React.Fragment>
) : (
<React.Fragment>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 4}}>
{activeStep !== 0 && (
<Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
Back
</Button>
)}
<Button
variant="contained"
onClick={handleNext}
sx={{ mt: 3, ml: 1 }}
>
{activeStep === steps.length - 1 ? 'Save' : 'New'}
</Button>
</Box>
{getStepContent(activeStep)}
</React.Fragment>
)}
</React.Fragment>
</React.Fragment>
and these are the steps functions
function CheckoutContent() {
const [activeStep, setActiveStep] = React.useState(0);
const handleNext = () => {
setActiveStep(activeStep + 1);
};
const handleBack = () => {
setActiveStep(activeStep - 1);
};
i'm using material-ui for this.
If I understand your question, this is what you can do:
const savable = activeStep === steps.length;
<Button
type={savable ? "submit" : undefined}
variant="contained"
onClick={savable ? undefined : handleNext}
sx={{ mt: 3, ml: 1 }}
>
{savable ? "Save" : "New"}
</Button>
You can do a conditional rendering:
Check the updated codesandbox
{activeStep === STEPS.length - 1 ? (
<Button variant="contained"
type="submit"
sx={{ mt: 3, ml: 1 }}
> Save </Button>
) : (
<Button variant="contained"
onClick={handleNext}
sx={{ mt: 3, ml: 1 }}
> New </Button>
)}
{accordion.map(accordionItem => (
<AccordionItem
key={accordionItem.title}
text={accordionItem.text}
title={accordionItem.title}
></AccordionItem>
))}
I have an Accordion component that maps over an array of data. I am trying to open just the first tab. There are properties you can add to default expand all or none, but wondering how to do this on the first tab?
Material UI also has customised Accordions but they are focused when all data is in one file and not mapped through an array.
<Accordion className={classes.accordion} defaultExpanded={false}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'
style={{
borderBottom: '2px solid #EBEDF7'
}}
>
<Typography className={classes.heading}>{title}</Typography>
</AccordionSummary>
<AccordionDetails>
<Text label={text} className={classes.body} html>
{text}
</Text>
</AccordionDetails>
</Accordion>
This seem to work for me with MUI v5 to open first item (summary) of the accordion
...
summaries.map((summary, index) => (
<MuiAccordion
defaultExpanded={index === 0 ? true : false}
key={summary.id}
>
...
In my case I know what the title of the tabs will be so I was able to do a simple if statement that would open the first tab if the tabs name was as such.
const firstTabCheck =
title === 'Invest some of it' ? (
<Accordion className={classes.accordion} defaultExpanded={true}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'
style={{
borderBottom: '2px solid #EBEDF7'
}}
>
<Typography className={classes.heading}>{title}</Typography>
</AccordionSummary>
<AccordionDetails>
<Text label={text} className={classes.body} html>
{text}
</Text>
</AccordionDetails>
</Accordion>
) : (
<Accordion className={classes.accordion} defaultExpanded={false}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'
style={{
borderBottom: '2px solid #EBEDF7'
}}
>
<Typography className={classes.heading}>{title}</Typography>
</AccordionSummary>
<AccordionDetails>
<Text label={text} className={classes.body} html>
{text}
</Text>
</AccordionDetails>
</Accordion>
)
return firstTabCheck
I'm sure there is a cleaner way to do this if anyone wants to reply but this has fixed my issue for the time being.
{forms.map((form,index) => {
return (
<Accordion expanded={expanded === `panel_${index}`} onChange={handleChange(`panel_${index}`)}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
{form.status === "pending" && (
<Chip
style={{ margin: '0' }}
size="small"
label={form.status}
color="default"
clickable
icon={<HistoryIcon />}
/>
)}
{form.status === "approved" && (
<Chip
style={{ margin: '0' }}
size="small"
label={form.status}
color="primary"
clickable
icon={<DoneIcon />}
/>
)}
{form.status === "rejected" && (
<Chip
style={{ margin: '0' }}
size="small"
label={form.status}
color="secondary"
clickable
icon={<ClearIcon />}
/>
)}
<Typography className={classes.heading}>{form.typeOfleave}</Typography>
<Typography className={classes.secondaryHeading}>{moment(form.createdAt).format('MMMM Do YYYY, h:mm:ss a')}</Typography>
</AccordionSummary>
<AccordionDetails style={{ display: 'flex', flexDirection: 'column' }}>
<div>
<Typography gutterBottom className={classes.secondaryHeading}>
Reason : {form.reason}
</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography className={classes.secondaryHeading}>
From : {moment(form.from).subtract(10, 'days').calendar()}
</Typography>
<Typography className={classes.secondaryHeading} style={{ marginLeft: '20px' }}>`enter code here`
To : {moment(form.to).subtract(10, 'days').calendar()}
</Typography>
</div>
</AccordionDetails>
</Accordion>
)
})}
set expanded state (default state) to '0' because array index is starting from 0
const [expanded, setExpanded] = React.useState('panel_0');
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};