CSS使用样式组件和颜色主题搞砸了

Question

问题图片。我在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",
}

这个对象返回我所有的主题颜色，但是原色部分是它检查一个名为themeColor的状态，当设置为蓝色时，返回蓝色作为整个应用程序的原色，否则返回绿色。整个应用程序都被useContext的Provider包裹着，而主题是通过stylesed -components的ThemeProvider传递的，如下所示:

import { ThemeProvider } from "styled-components";
<ThemeContext.Provider value={{theme,themeToggler,themeColor,setThemeColor}}>
<ThemeProvider theme={themeStyle}>
{children}
</ThemeProvider>
</ThemeContext.Provider>

这是CSS部分，为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;
}
`);

Answer 1

也许重要的规则可以解决你的问题。你可以试着在css属性后面写!important。例子:background: ${theme.primaryColor2} !important;