React结合Styled Components：如何通过State控制组件背景颜色

步骤1：修改Styled Components，支持动态样式切换 #

给TemplateContainer添加接收isSelected属性的逻辑，当该属性为true时，将背景色设置为绿色：

const TemplateContainer = styled.div`
    width: 35%;
    height: 100%;
    border-radius: 0.5em;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    /* 根据isSelected属性动态切换背景色 */
    background-color: ${props => props.isSelected ? 'green' : 'transparent'};
    /* 可选：添加过渡动画让切换更流畅 */
    transition: background-color 0.2s ease;
`;

步骤2：给每个组件实例传递选中状态判断 #

每个TemplateContainer对应唯一的编号（1、2、3），渲染时通过判断全局状态selectedTemplate是否等于当前组件的编号，把结果传给isSelected属性：

示例代码（包含三个组件）：

const [selectedTemplate, setSelectedTemplate] = useState(0)

// 第一个模板组件（对应编号1）
<TemplateContainer isSelected={selectedTemplate === 1}>
    <DummyTemplateImage onClick={() => setSelectedTemplate(1)}>
        <ImageContainer src={General}/>
    </DummyTemplateImage>
    <Typography variant="h5" fontSize="18px" color="primary">
        Text!!
    </Typography>
    <Typography variant="subtitle4" color="black">
        Text!
    </Typography>
</TemplateContainer>

// 第二个模板组件（对应编号2）
<TemplateContainer isSelected={selectedTemplate === 2}>
    <DummyTemplateImage onClick={() => setSelectedTemplate(2)}>
        <ImageContainer src={/* 第二个模板的图片资源 */}/>
    </DummyTemplateImage>
    <Typography variant="h5" fontSize="18px" color="primary">
        第二个模板标题
    </Typography>
    <Typography variant="subtitle4" color="black">
        第二个模板描述
    </Typography>
</TemplateContainer>

// 第三个模板组件（对应编号3）
<TemplateContainer isSelected={selectedTemplate === 3}>
    <DummyTemplateImage onClick={() => setSelectedTemplate(3)}>
        <ImageContainer src={/* 第三个模板的图片资源 */}/>
    </DummyTemplateImage>
    <Typography variant="h5" fontSize="18px" color="primary">
        第三个模板标题
    </Typography>
    <Typography variant="subtitle4" color="black">
        第三个模板描述
    </Typography>
</TemplateContainer>

核心逻辑说明 #

• Styled Components支持通过props动态生成样式，这里利用isSelected属性作为开关，控制背景色的切换。
• 每个组件通过对比全局状态selectedTemplate和自身编号，确定是否需要激活绿色背景样式。

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