En react-js, tengo un div con la función onClick, el tiempo de clic i varita un borde de selección para ese div, ya tiene un borde
.section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } .section-divs { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; background-color: #fff; border: 4px solid red; cursor: pointer, } .selected { border: 4px solid blue; } <html> <head> </head> <body> <div className='section'> <div className={`section-divs${selectedDiv === div1 ? " selected" : undefined}`} /*onClick='clickMe'*/> Click me </div> <div className={`section-divs${selectedDiv === div2 ? " selected" : undefined}`} /*onClick='clickMe'*/> Click me </div> </div> </body> </html> No agrego ningún div adicional a este código. En el tiempo de selección, los dos div muestran cómo es posible, the functionality are working selected div are show in browser elements . el estilo es un problema en la clase de section-divs ya tiene un borde en color rojo en el tiempo selected , muestro un borde azul de contorno, ayúdenme a resolver este problema
Según mi comprensión de su problema. Este fragmento de código resolverá su problema. Manifestación
export default function App() { const [selectedDiv, setSelectedDiv] = useState(""); return ( <div className="section"> <div className={`section-divs ${ selectedDiv === "div1" ? " selected" : undefined }`} onClick={() => setSelectedDiv("div1")} > Click me </div> <div className={`section-divs ${ selectedDiv === "div2" ? " selected" : undefined }`} onClick={() => setSelectedDiv("div2")} > Click me </div> </div> ); } .App { font-family: sans-serif; text-align: center; } .section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } .section-divs { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; background-color: #fff; border: 4px solid red; cursor: pointer; } .selected { outline: 4px solid blue; }