如何在React styled-components中设置活跃元素前置兄弟节点的样式

你只需要新增步骤完成状态的判断逻辑，给每个步骤项传递是否已完成的标识，再对应调整styled组件的样式即可，具体修改如下：

步骤1：新增完成状态判断逻辑 #

在StyledMenu组件中先计算当前活跃步骤的索引，遍历步骤时判断当前项是否为活跃项之前的已完成项，将状态传递给Step组件：

const StyledMenu = () => {
  const [currentStep, setCurrentStep] = React.useState('template');     
  const steps = ['template', 'audience', 'demography', 'action'];
  // 新增：获取当前活跃步骤的索引
  const currentStepIndex = steps.indexOf(currentStep);

  const goToNextStep = () => {
    const index = steps.indexOf(currentStep);
    if (index >= steps.length - 1) return; // 加边界判断避免越界
    setCurrentStep(steps[index + 1]);
  };

  const goToPreviousStep = () => {
    const index = steps.indexOf(currentStep);
    if (index === 0) return;
    setCurrentStep(steps[index - 1]);
  };

  return(
    <div>
      <StepsWrapper>
          {steps.map((step, index) => (
            // 新增传递isCompleted属性，判断当前项是否为活跃项之前的已完成步骤
            <Step 
              key={step} 
              active={step === currentStep} 
              last={index === steps.length - 1} 
              isCompleted={index < currentStepIndex}
            >
              <StepDescription>{step}</StepDescription>
            </Step>
          ))}
      </StepsWrapper>
    </div>
  )
}

步骤2：调整styled组件样式 #

修改Step组件的入参类型，新增已完成状态的样式规则，同时可以按需添加步骤圆点、连接线的样式匹配示例效果：

const StepsWrapper = styled('div')`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  height: 69px;
  line-height: 69px;
  text-align: center;
  position: relative;
  top: 27px;
`;

// 新增isCompleted入参
const Step = styled('div')<{ active: boolean; last: boolean; isCompleted: boolean }>`
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${({ active, isCompleted }) => {
    if (isCompleted) return '#007a9e'; // 已完成步骤文字颜色，可自定义
    if (active) return '#44b3db'; // 活跃步骤文字颜色
    return '#c7e8f4'; // 未完成步骤文字颜色
  }};

  /* 步骤圆点样式，可根据需求调整尺寸、颜色 */
  &::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
    background-color: ${({ isCompleted, active }) => 
      isCompleted ? '#44b3db' : active ? '#fff' : '#c7e8f4'
    };
    border: 2px solid ${({ isCompleted, active }) => 
      isCompleted || active ? '#44b3db' : '#c7e8f4'
    };
  }

  /* 步骤间连接线样式，可根据需求调整尺寸、颜色 */
  &:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    z-index: -1;
    background-color: ${({ isCompleted }) => 
      isCompleted ? '#44b3db' : '#c7e8f4'
    };
  }
`;

const StepDescription = styled('div')`
  width: 240px;
  height: 29px;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  margin: 0 auto;
`;

你可以根据自己的设计需求，修改上述代码中对应颜色、尺寸的参数即可匹配预期效果。

内容的提问来源于stack exchange，提问作者Milos