使用反应样式组件渲染多个样式类答案

【问题标题】：Rendering multiple style classes with react styled components使用反应样式组件渲染多个样式类
【发布时间】：2021-04-30 05:20:18
【问题描述】：

在我正在处理的步进器组件中，我使用的是 React Styled Components 库。不幸的是，我不能使用 Material UI 或其他类似的解决方案。最初，我使用 CSS 来呈现步进器的所有 UI：

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

这行得通，但现在我必须使用这个库，所以我转换了我现在已经将水平线 CSS 转换为样式组件。

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

步进器动画的其余部分工作，但原始代码不渲染水平线。

我在渲染各种状态的编号气泡时遇到了类似的问题，我通过创建变量以在内联样式中使用来解决这个问题：

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

但是，我不确定如何在样式化组件中使用 {`divider-line divider-line_${steps.length}`}。有什么建议吗？

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

您不需要使用带有样式组件的多个类。你可以这样做：

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

然后：

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

样式化的组件会根据传递给它的 props 为您动态生成一个新的 className。将 styled-components const 视为完整的组件，而不是 css 属性的 blob。

【讨论】：