reactjs - Material-ui stepper 用线连接点
问题描述
我正在实现 material-ui 步进器,更具体地说是“小点步进器”,而我目前面临的挑战是将点与线连接起来。我尝试将 StepConnector 位置设置为绝对位置,但在更改屏幕时表现不佳,有人知道解决方案吗?
链接到有问题的步进器:
https://material-ui.com/components/steppers/
大部分代码已经在我提供的链接中
import styles from "./styles";
import {
Paper,
Grid,
Typography,
Stepper,
Step,
StepLabel,
StepContent,
StepConnector,
makeStyles,
withStyles,
} from "@material-ui/core";
import { MoreHoriz } from '@material-ui/icons'
import PropTypes from "prop-types";
import React from "react";
const useQontoStepIconStyles = makeStyles({
root: {
color: '#2e5bff',
display: 'flex',
height: 28,
marginLeft: 8,
alignItems: 'center',
},
active: {
color: '#2e5bff',
},
circle: {
zIndex: 2,
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: 'currentColor',
},
completed: {
color: '#2e5bff',
zIndex: 1,
fontSize: 18,
},
});
function QontoStepIcon(props) {
const classes = useQontoStepIconStyles();
return (
<div
className={classes.root}
>
<div style={{color: props.color}} className={classes.circle} />
</div>
);
}
QontoStepIcon.propTypes = {
active: PropTypes.bool,
completed: PropTypes.bool,
};
const QontoConnector = withStyles({
alternativeLabel: {
top: 10,
left: 'calc(-50% + 16px)',
right: 'calc(50% + 16px)',
},
lineVertical: {
height: 20
},
active: {
'& $line': {
borderColor: '#2e5bff',
},
},
completed: {
'& $line': {
borderColor: '#2e5bff',
},
},
line: {
borderColor: '#eaeaf0',
borderTopWidth: 3,
borderRadius: 1,
},
})(StepConnector);
<Stepper orientation="vertical" connector={<QontoConnector />}>
{steps.map((step, index) => (
<Step key={step.label}>
<StepLabel
optional={<Typography className={classes.description}>{step.description}</Typography>}
StepIconComponent={() => <QontoStepIcon color={step.color}/>}
>
<Typography className={classes.title}>
{step.title}
</Typography>
</StepLabel>
</Step>
))}
</Stepper>
解决方案
我通过使用 ::after 和 ::before 的伪元素解决了这个问题。它没有响应,但可以满足我的需求。
推荐阅读
- excel - 如何快速将表格列中的文本转换为公式
- python - 将参数传递给 Azure 中的 Python 任务
- go - Goroutine 安全通道关闭实际上并没有关闭 webscoket
- python - Jupyter Notebook 上的 sock.connect()
- javascript - 刷新 Microsoft Graph API 的浏览器后保持用户登录状态?
- angular - PWA:将客户端的日历事件与服务器同步
- python - 使用原始查询在 Django 中引用 auth_user 表的问题
- unreal-engine4 - 如何在虚幻引擎中更改“FAudioCapture”流的采样率
- python - Python datetime.astimezone:当应用 1 小时前的负 timedelta 时,为什么结果日期中的 timedelta 天数=-1,秒数=82800?
- arrays - 将数组添加到字典