Stack Exchange
How to style previous siblings in react styled-components?
I have react component like this:
const StyledMenu = () => {
   const [currentStep, setCurrentStep] = React.useState('template');     
   const steps = ['template', 'audience', 'demography', 'action'];

   const goToNextStep = () => {
      const index = steps.indexOf(currentStep);
      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) => (
                <Step key={step} active={step === currentStep} last={index === 3}>
                   <StepDescription>{step}</StepDescription>
                </Step>
             ))}
         </StepsWrapper>
      </div>
   )
}

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;
`;

 const Step = styled('div')<{ active: boolean; last: boolean }>`
   color: ${({ active }) =>
      active ? '#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;
 `;

and I'm trying to style the items which are before the active item. If the first item is active, then nothing will be styled. I want to achieve styles from these images:

and

and

How can I achieve this? Thanks in advance!

You can try checking for the indexes less than current active index and style it differently.

@vishnusandhireddy Can you, please, share the example?

I achieved this by adding a new state for the active index, and to styled-component I sent a boolean if the active index is bigger than the index, so the indexes less than current active index will be styled differently as @vishnu mentioned in the comment above. The code looks now like this
const StyledMenu = () => {
  const [currentStep, setCurrentStep] = React.useState('template');     
  const steps = ['template', 'audience', 'demography', 'action'];

  //added this line of code
  const [activeIndex, setActiveIndex] = React.useState(0);

  const goToNextStep = () => {
    const index = steps.indexOf(currentStep);
    setCurrentStep(steps[index + 1]);
    //set the new activeIndex
    setActiveIndex(index + 1);
  };

  const goToPreviousStep = () => {
    const index = steps.indexOf(currentStep);
    if (index === 0) {
       return;
    }
    setCurrentStep(steps[index - 1]);
    //set the new activeIndex
    setActiveIndex(index - 1);
  };
  return(
    <div>
       <StepsWrapper>
           {steps.map((step, index) => (
             //sending the checked props to the styled component
              <Step key={step} active={step === currentStep} last={index 
                === 3} checked={activeIndex > index}>
                 <StepDescription>{step}</StepDescription>
              </Step>
            ))}
       </StepsWrapper>
    </div>
  )
}

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;
`;

 const Step = styled('div')<{ active: boolean; last: boolean; 
    checked: boolean }>`
    //checking if component is marked to be styled differently
    color: ${({ active, checked }) =>
       active ? '#44b3db' : checked ? 'red' '#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;
 `;


You can also get the whole thing working by using just indexes and saving activeIndex state. We need not depend on array details for active state.
