如何从父组件材质UI覆盖子组件样式

Question

我去过很多文章和博客，以找到一种解决方案来替代Material UI中父组件的子组件样式，但是没有任何效果。

我正在通过扩展材料UI步进器组件来实现自定义可重复使用的步进器组件。但是，当我尝试覆盖子组件（如stepLabel，stepIcon等）的样式时，没有应用任何内容。

当我在故事书中单独运行自定义步进器组件时，一切正常，但是，当我将自定义步进器组件导入项目时，不会应用样式。不知道出了什么问题。下面是代码段。

组件

import React, {forwardRef, FC} from 'react';
import {Stepper as MaterialStepper, Step, StepLabel} from '@material-ui/core';
import {withStyles} from '@material-ui/core/styles';
import {useId} from 'react-id-generator';

import {customStyles} from './Stepper.styles';
import {CustomProps} from './types';

 
const Stepper: FC<CustomProps> = forwardRef((props, ref) => {
  const {classes, activeStep = 0, steps, ...rest} = props;
  const keys = useId(steps.length, 'stepper');
  return (
      <MaterialStepper
        // eslint-disable-next-line react/jsx-no-useless-fragment
        connector={<></>}
        role="list"
        activeStep={activeStep}
        alternativeLabel
        nonLinear
        className={classes.root}
        ref={ref}
        {...rest}
      >
        {steps.map((step, index) => {
          return (
            <Step
              key={`${keys[index]}_step`}
              role="listitem"
            >
              <StepLabel>
                <div>{step}</div>
              </StepLabel>
            </Step>
          );
        })}
      </MaterialStepper>
  );
});
 
export const CustomStepper = withStyles(customStyles, {name: 'MuiCustomStepper'})(Stepper);
 

样式：

export const customStyles = (theme: Theme) => ({
    root: {
      padding: 0,
      '& .MuiStep-root': {
        padding: 0,
        '&:first-child': {
          '& .MuiStepLabel-iconContainer': {
            borderLeft: `1px solid ${color}`,
            borderRadius: '10px 0px 0px 10px'
          }
        },
        '&:last-child': {
          '& .MuiStepLabel-iconContainer': {
            borderRadius: '0 28px 28px 0',
            borderRight: `1px solid ${color}`
          }
        },
        '& .MuiStepLabel-iconContainer': {
          borderTop: `1px solid ${color}`,
          borderBottom: `1px solid ${color}`,
          padding: 0,
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
          height: 55,
          [theme.breakpoints.down('xs')]: {
            height: 27
          },
          '& svg': {
            fontSize: '3.5rem',
            verticalAlign: 'middle',
            [theme.breakpoints.down('xs')]: {
              fontSize: '1.5rem'
            }
          }
        }
      },
      '& .MuiStep-completed': {
        '& .MuiStepLabel-iconContainer': {
          background: `${color}`,
          '& .MuiStepper-arrowStyles': {
            borderColor: theme.palette.common.white
          },
          '& *': {
            color: theme.palette.common.white
          }
        }
      }
    },
    arrowStyles: {
      borderRight: `1px solid ${color}`,
      borderBottom: `1px solid ${color}`,
      height: 38,
      width: 41,
      transform: 'rotate(-45deg)',
      position: 'absolute',
      right: 8,
      top: 9,
      borderRadius: 3,
      [theme.breakpoints.down('xs')]: {
        height: 20,
        width: 20,
        top: 4
      }
    }
});