Estoy usando Material UI con TypeScript en React. Cuando un usuario hace clic en el botón, quiero que se resalte el botón. Actualmente, este código cambiará el color de los botones, pero cuando hago clic en otro botón, también se resalta. Estoy tratando de tener solo un botón resaltado a la vez, así que cuando hago clic en un botón diferente, quiero que el botón anterior se configure en la clase normal y el nuevo botón se configure en la clase en la que se hizo clic. Si vuelvo a hacer clic en el botón, eliminará la clase, pero solo quiero que la clase "en la que se hizo clic" sea solo el botón actual. He visto esto hecho con índices, pero me pregunto cuál sería la mejor manera de abordar esto. Cualquier ayuda es apreciada.

Actualmente estoy diseñando la clase en la que se hizo clic en index.css para anular los temas de material-ui:

index.css

 .btnClass.clicked { background-color: #1976D2; color: #FFFFFF; }

 // ... <TableBody> {state.currentUsers .slice( page * rowsPerPage, page * rowsPerPage + rowsPerPage ) .map((users) => { return ( <SelectUser key={Number(user.uid)} name={user.name} /> ); })} </TableBody>

 import React, { useState } from "react"; import Button from "@material-ui/core/Button"; import TableCell from "@material-ui/core/TableCell"; import TableRow from "@material-ui/core/TableRow"; import { useStyles } from "./useStyles"; export function SelectUser(props) { const classes = useStyles(); const [btnClass, setBtnClass] = useState(false); return ( <TableRow className={classes.tableRow} key={props.uid}> <TableCell component="th" scope="row" align="left"> // when button is clicked, set current button to clicked class and all other buttons to unclicked <Button className={btnClass ? "btnClass clicked" : "btnClass"} onClick={() => { props.setUser(props.user); btnClass ? setBtnClass(false) : setBtnClass(true); // set previous button to unclicked }} > { props.id} </Button> </TableCell> <TableCell component="th" scope="row" align="right"> {props.name} </TableCell> </TableRow> ); }