0
344
VistasCómo dar estilo a la etiqueta en el botón de radio MUI cuando está marcado
Buenos días a todos. Estoy tratando de cambiar el estilo del texto de la etiqueta en el botón de opción para que cambie a un color azul cuando se seleccione.
ESTE ES MI CÓDIGO DEL BOTÓN MUI HASTA AHORA
import * as React from "react"; import Radio from "@mui/material/Radio"; import RadioGroup from "@mui/material/RadioGroup"; import FormControlLabel from "@mui/material/FormControlLabel"; import FormControl from "@mui/material/FormControl"; export default function RowRadioButtonsGroup({label1, label2}) { return ( <FormControl> <RadioGroup row aria-labelledby="demo-row-radio-buttons-group-label" name="row-radio-buttons-group" style={{display: 'flex', gap: '2rem'}} sx={{ '& .MuiSvgIcon-root': { fontSize: 28, }, }} > <FormControlLabel value="Sunday" control={<Radio />} label={label1}/> <FormControlLabel value="Monday" control={<Radio />} label={label2} /> </RadioGroup> </FormControl> ); }
·
Santiago Gelvez
1 Respuestas
Responde la pregunta0
Básicamente, simplemente cree una etiqueta de control de formulario con estilo y use el botón de enlace "useRadioGroup" y elija los colores para https://codesandbox.io/s/radiobuttonsgroup-demo-material-ui-forked-pix9rg?file=/demo marcados y desmarcados. js
// Custom label const StyledFormControlLabel = styled((props) => ( <FormControlLabel {...props} /> ))(({ theme, checked }) => ({ ".MuiFormControlLabel-label": checked && { // Change color here color: "red" } })); // Custom FormControl function MyFormControlLabel(props) { // MUI UseRadio Group const radioGroup = useRadioGroup(); let checked = false; if (radioGroup) { checked = radioGroup.value === props.value; } return <StyledFormControlLabel checked={checked} {...props} />; } <MyFormControlLabel value="female" control={<Radio />} label="Female" />
·
Santiago Gelvez
Denunciar
Responde la pregunta