[Stepper] Only render label container if a label exists (#21322)

mui · Jun 7, 2020 · 40b6fdd · 40b6fdd
1 parent 81cc283
commit 40b6fdd
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -128,19 +128,21 @@ const StepLabel = React.forwardRef(function StepLabel(props, ref) {
         </span>
       ) : null}
       <span className={classes.labelContainer}>
-        <Typography
-          variant="body2"
-          component="span"
-          className={clsx(classes.label, {
-            [classes.alternativeLabel]: alternativeLabel,
-            [classes.completed]: completed,
-            [classes.active]: active,
-            [classes.error]: error,
-          })}
-          display="block"
-        >
-          {children}
-        </Typography>
+        {children ? (
+          <Typography
+            variant="body2"
+            component="span"
+            display="block"
+            className={clsx(classes.label, {
+              [classes.alternativeLabel]: alternativeLabel,
+              [classes.completed]: completed,
+              [classes.active]: active,
+              [classes.error]: error,
+            })}
+          >
+            {children}
+          </Typography>
+        ) : null}
         {optional}
       </span>
     </span>