React中styled-components主题切换后输入框标签颜色异常求助

问题描述 #

React应用中主题配色配置完成，整体功能正常，但输入框标签组件存在异常：切换到绿色主题再切回蓝色主题后，聚焦输入框时标签会显示相反主题的颜色；初始状态下聚焦输入框，标签颜色正常显示为蓝色。

相关代码 #

主题配置代码 #

{
    type: "light",
    primaryColor1: "#33b2ff", //lightest
    primaryColor2: themeColor === "blue" ? "#009fff" : "#00b05d", //ChangeColor()
    primaryColor3: "#007fcc", //darkest
    textColor1: "#111", //darkest
    textColor2: "#555",
    textColor3: "#888", //lightest
    backgroundColor1: "#fcfcfc", //lightest
    backgroundColor2: "#e3e3e3",
    backgroundColor3: "#cacaca", //darkest
    borderColor: "009fff",
    white: "#fff",
    black: "000",
}

主题传递代码 #

import { ThemeProvider } from "styled-components";

<ThemeContext.Provider value={{theme,themeToggler,themeColor,setThemeColor}}>
            <ThemeProvider theme={themeStyle}>
                {children}
            </ThemeProvider>
        </ThemeContext.Provider>

Input和Label组件样式代码 #

export const Input = styled.input( ({theme}) => `
    border-radius: 10px;
    width: 100%;
    font-size: 1rem;
    background: ${theme.backgroundColor3};
    border: 0;
    color: ${theme.textColor1};
    line-height: 50px;
    padding: 5px 20px;
    box-sizing: border-box;
    font-family: Montserrat;

    &:focus
    {
        outline: none;
    }

    &[type=password]
    {
        font-size: 1.75rem;
    }
`);

export const Label = styled.label( ({theme}) => `
    font-size: 1rem;
    font-family: Montserrat;
    color: ${theme.textColor3};
    cursor: text;
    position: absolute;
    top: 30%;
    left: 5.5%;
    border: 1px solid ${theme.borderColor};
    transition: 0.2s ease all;
    background: none;

    ${Input}:focus + &,
    ${Input}:not(:placeholder-shown) + &
    {
        background: ${theme.primaryColor2};
        padding: 0.2rem 0.5rem 0.2rem;
        border-radius: 0.5rem;
        top: -15%;
        left: 3%;
        font-size: 0.9rem;
        color: #fff;
    }

`);

问题原因 #

1. 无效颜色值：主题配置中的borderColor和black属性缺少#前缀，属于无效CSS颜色值，可能导致样式解析异常，干扰主题切换后的样式更新。
2. 主题对象未响应更新：themeStyle的生成逻辑可能没有在themeColor状态变化时重新计算，导致ThemeProvider没有接收到最新的主题对象，组件无法获取更新后的primaryColor2值。
3. styled-components选择器缓存：使用${Input}:focus + &这种组件嵌套选择器时，styled-components可能会缓存旧主题下的样式规则，主题切换后未及时更新关联的样式变量。

解决方案 #

1. 修复无效颜色值 #

给主题配置中的borderColor和black添加#前缀，确保颜色值有效：

{
    type: "light",
    primaryColor1: "#33b2ff",
    primaryColor2: themeColor === "blue" ? "#009fff" : "#00b05d",
    primaryColor3: "#007fcc",
    textColor1: "#111",
    textColor2: "#555",
    textColor3: "#888",
    backgroundColor1: "#fcfcfc",
    backgroundColor2: "#e3e3e3",
    backgroundColor3: "#cacaca",
    borderColor: "#009fff", // 添加#前缀
    white: "#fff",
    black: "#000", // 添加#前缀
}

2. 确保主题对象响应状态变化 #

使用useMemo缓存themeStyle，依赖themeColor状态，确保状态变化时重新生成主题对象：

import { useMemo } from 'react';

// 在组件内部生成themeStyle
const themeStyle = useMemo(() => ({
    type: "light",
    primaryColor1: "#33b2ff",
    primaryColor2: themeColor === "blue" ? "#009fff" : "#00b05d",
    primaryColor3: "#007fcc",
    textColor1: "#111",
    textColor2: "#555",
    textColor3: "#888",
    backgroundColor1: "#fcfcfc",
    backgroundColor2: "#e3e3e3",
    backgroundColor3: "#cacaca",
    borderColor: "#009fff",
    white: "#fff",
    black: "#000",
}), [themeColor]);

3. 修改Label组件选择器避免缓存问题 #

将组件嵌套选择器改为原生CSS选择器，绕过styled-components的缓存机制：

export const Label = styled.label(({theme}) => `
    font-size: 1rem;
    font-family: Montserrat;
    color: ${theme.textColor3};
    cursor: text;
    position: absolute;
    top: 30%;
    left: 5.5%;
    border: 1px solid ${theme.borderColor};
    transition: 0.2s ease all;
    background: none;

    input:focus + &,
    input:not(:placeholder-shown) + &
    {
        background: ${theme.primaryColor2};
        padding: 0.2rem 0.5rem 0.2rem;
        border-radius: 0.5rem;
        top: -15%;
        left: 3%;
        font-size: 0.9rem;
        color: #fff;
    }
`);

或者，给Input组件添加明确的类名，使用类选择器：

export const Input = styled.input.attrs({ className: 'custom-input' })(({theme}) => `
    // 原有样式保持不变
`);

export const Label = styled.label(({theme}) => `
    // 基础样式保持不变

    .custom-input:focus + &,
    .custom-input:not(:placeholder-shown) + &
    {
        // 聚焦样式保持不变
    }
`);

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