在 mui stepper 和覆蓋樣式中添加中間步驟

Question

我想更改以下代碼以滿足我的需要

1. 我需要從這個改變設計：

對此：

我無法更改樣式並添加中間步驟

這是沙箱的林

https://codesandbox.io/s/horizo​​ntalnonlinearstepper-demo-material-ui-forked-9pqxxk

先感謝您

Answer 1

要使步進器圖標彼此靠近，只需更改<Stepper />組件的width 。 我選擇了400px ，更改此值以滿足您的需要。

sx={{
  width: "400px",
  ...
}}

我用更寬的箭頭❯替換了內容>並調整了top對齊方式。

".MuiStepConnector-root": {
  top: 2
},
".MuiStepConnector-root span::before": {
  display: "flex",
  justifyContent: "center",
  content: '"❯"'
}

結果如下所示：

現場演示