[英]how to increase the size of the stepper in MUI
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.
我是 react.js 和 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:也许您可以将自定义 css 添加到您的网页:
.MuiStepLabel-labelContainer span {
font-size: xx-large;
}
You can adjust to your desired font size by changing the "font-size" value.您可以通过更改“font-size”值来调整到所需的字体大小。
You can use a Theme .您可以使用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.
我找不到阻止这种情况的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.