Soy nuevo en React y no encontré ninguna solución a este simple problema.

Quiero revertir los colores de LangText cuando se hace clic en el botón de alternancia: inicialmente ENG es blanco y EST es negro y cada vez que se hace clic en la entrada , los colores se invierten.

Tengo archivos separados para devolver y diseñar componentes.

Traté de cambiar el color de una variable (ubicada en la parte superior del archivo de componentes de estilo) dentro de la etiqueta del componente con estilo, así que con CSS, dentro de la pseudoclase Input &:checked + span . Parecía surrealista y no funcionó de ninguna manera.

Agradecería mucho un ejemplo de cómo cambiar dos colores al mismo tiempo, en este caso. Siempre hay muy pocos ejemplos con componentes, por lo general, CSS se usa por separado, pero para mí este método es más legible y lógico.

 import React from 'react' import { Input, InputWrapper, Slider, ToggleContainer, LangText} from './LangugageToggleElements'; const LanguageToggle = ({onChange}) => { return( <ToggleContainer> <InputWrapper> <Input type="checkbox" onChange={onChange}/> <Slider> <LangText>ENG</LangText> <LangText>EST</LangText> </Slider> </InputWrapper> </ToggleContainer> )} ; export default LanguageToggle

 import styled from "styled-components"; let toggleBackground = "#000"; let textColor = "#fff"; export const ToggleContainer = styled.div` position: absolute; top: 10px; right: 20px; ` export const InputWrapper = styled.label` position: relative; display: flex; justify-content: center; text-align: center; ` export const Input = styled.input` position: absolute; left: -9999px; top: -9999px; &:checked + span { &:before { left: 52px; } } ` export const Slider = styled.span` display: flex; justify-content: center; text-align: center; cursor: pointer; width: 105px; border-radius: 100px; position: relative; transition: background-color 0.2s; color: ${textColor}; &:before { content: ""; position: absolute; top: 15px; left: 2px; width: 50px; height: 20px; border-radius: 45px; transition: 0.2s; background: ${toggleBackground}; box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2); } `; export const LangText = styled.p` padding-right: 5px; padding-left: 5px; z-index: 1; letter-spacing: 3px; `;