0
214
VistasEstablecer el color de fondo seleccionado de MUI ToggleButton
No puedo establecer el color de fondo cuando se selecciona el botón de alternancia. En este momento, los botones funcionan pero no tienen ningún color específico cuando se selecciona uno. Quiero tener un color predeterminado para Btn 1 y si el usuario selecciona cualquier otro botón, ese botón debería tener el color predeterminado.
<Grid container direction='column'> <ToggleButtonGroup value={title} exclusive size='small' > <ToggleButton onClick={this.handleOnClick}> Btn 1 </ToggleButton> <ToggleButton onClick={this.handleOnClick}> Btn 2 </ToggleButton> <ToggleButton onClick={this.handleOnClick}> Btn 3 </ToggleButton> </ToggleButtonGroup> </Grid>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Use el selector &.Mui-selected para cambiar el color de fondo del ToggleButton seleccionado. Puede ver una lista de clases estatales aquí :
import MuiToggleButton from "@mui/material/ToggleButton"; import { styled } from "@mui/material/styles"; const ToggleButton = styled(MuiToggleButton)({ "&.Mui-selected, &.Mui-selected:hover": { color: "white", backgroundColor: '#00ff00' } });Si desea proporcionar un accesorio de color seleccionado:
const ToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({ "&.Mui-selected, &.Mui-selected:hover": { color: "white", backgroundColor: selectedColor } })); <ToggleButton value="left" selectedColor="#00abc0"> <FormatAlignLeftIcon /> </ToggleButton> 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta