Rendering multiple style classes with react styled components

Question

In the stepper component that I am working on, I am using the React Styled Components library. Unfortunately, I can't use Material UI or another similar solution. Originally, I was using CSS which rendered all of the UI for the stepper:

                        {index !== steps.length - 1 && (
                            <div
                                className={`divider-line divider-line_${steps.length}`}
                            />
                        )}

This worked, but now I have to use this library, so I converted the I've now converted the horizontal line CSS as styled-components.

styled.js

export const DividerLine = styled.div`
    height: 1px;
    background-color: blue;
    position: absolute;
    top: 20%;
    left: 70%;
`;

export const DividerLine_2 = styled.div`
    width: 296%;
`;

export const DividerLine_3 = styled.div`
    width: 125%;
`;

export const DividerLine_4 = styled.div`
    width: 70%;
`;

export const DividerLine_5 = styled.div`
    width: 60%;
`;

The rest of the stepper animations work but the original code does not render the horizontal lines.

I ran into a similar problem with rendering the numbered bubbles in various states, which I resolved by creating variables to use within inline styling:

        let stepColor = '#65CC34';
        let stepText = '#ffffff';
        let stepTextActive = '#65CC34';

Stepper.js

                <StepContainer key={index}>
                    <StepWrapper>
                        <StepNumber
                            style={{
                                background: `${
                                    step.selected ? stepColor : ''
                                }`,
                                color: `${
                                    step.selected ? stepText : stepTextActive
                                }`,
                            }}
                        >
                            {step.completed ? <span>&#10003;</span> : index + 1}
                        </StepNumber>
                        {index !== steps.length - 1 && (
                            <div
                                className={`divider-line divider-line_${steps.length}`}
                            />
                        )}
                    </StepWrapper>
                    <DividerLine />
                </StepContainer>
            );
        });

        return <StepWrapper>{stepsJSX}</StepWrapper>;
    }
}

However, I'm not sure how to use {`divider-line divider-line_${steps.length}`} inside of the styled component. Any suggestions?

Answer 1

you don't need to use multiple classes with styled-components. Here's how you can do it:

const dividerLineWidths = {
    '2': '296%',
    '3': '125%',
    '4': '70%',
    '5': '50%'
}

export const DividerLine = styled.div`
    height: 1px;
    background-color: blue;
    position: absolute;
    top: 20%;
    left: 70%;

    ${({steps}) => steps && `
      width: ${dividerLineWidths[steps.length]}
    `}
`;

Then:

...
{index !== steps.length - 1 && <DividerLine steps={steps} />}
...

Styled components will dynamically generate a new className for you depending on the props being passed to it. Think of the styled-components consts as full components as opposed to blobs of css properties.