Estoy diseñando un componente de entrada, con un borde en un div que envuelve la entrada y una etiqueta que es un hermano de la entrada. Quiero que el color del borde y la etiqueta cambien cuando se enfoca la entrada.

El problema es: tengo dos de mis componentes uno al lado del otro, y cuando me enfoco en uno, ¡el color de ambas etiquetas cambia! Los bordes no tienen este problema, por cierto, solo las etiquetas.

 const S = { Wrapper: styled.div` position: relative; border: solid 1px ${theme.colors.lightGrey}; :hover { border-color: ${theme.colors.white}; } :focus-within { border-color: ${theme.colors.draftedBlue}; } `, Input: styled.input` /* omitted */ `, InputLabel: styled.label` position: absolute; top: -8px; left: 8px; input:focus + & { color: ${theme.colors.draftedBlue}; } `, }; const SDCurvedInput = ({ ...props }) => ( <S.Wrapper className={props.className}> <S.InputLabel htmlFor={props.label}>{props.label}</S.InputLabel> <S.InputWrapper> <S.Input {...props} onChange={e => props.onChange(e.target.value)} /> </S.InputWrapper> </S.Wrapper> ); const Inputs = () => { const { entryFee, payout, setEntryFee } = useSlip(); const clearIfZero = () => { if (!parseInt(entryFee)) setEntryFee(""); }; const resetToZeroIfBlank = () => { if (!entryFee) setEntryFee(0); }; return ( <S.Wrapper> <SDCurvedInput label="Entry Fee" type="number" value={entryFee} onChange={v => setEntryFee(parseInt(v))} onFocus={clearIfZero} onBlur={resetToZeroIfBlank} /> <SDCurvedInput label="Payout" value={payout || 0} readOnly /> </S.Wrapper> ); };

¡Ayuda!