0

Eu gostaria de alterar as propriedades padrões de um formControlLabel de body para caption. Eu tentei algo assim e funcionou:

<FormControlLabel
  value="all"
  control={<Radio color="primary" />}
  label={
    <Typography variant="caption">
      first
    </Typography>
  }
  labelPlacement="end"
/>

Porém não é exatamente esse efeito que eu desejo, nesse caso eu apenas inclui um novo span envolvendo o span original:

enter image description here

Algumas vezes eu tenho o mesmo problema tentando alterar as classes padrões de um elemento, infelizmente a documentação não me ajudou muito a entender o que devo fazer nesses casos.

O código de exemplo e outras tentativas fracassadas pode ser encontradas aqui.

1 Resposta 1

0

Ola,

Atualmente não há uma forma nativa de modificar a variante da tipografia do label do <FormControlLabel>. Porém aqui na documentação descreve uma forma com a utilização do tema, dessa forma você terá o resultado esperado sem gerar esse elemento extra no seu html, porém precisará utilizar da estratégia de classes que o Material-UI fornece para atingir o elemento que corresponde ao label.

Segue o código com a opção que você adotou e a que a documentação sugere:

import React, { useRef, useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import Box from "@material-ui/core/Box";

const useStyles = makeStyles((theme) => ({
  label: {
    ...theme.typography.caption,
  },
}));

export default function Branch() {
  const [value, setValue] = useState("all");
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const classes = useStyles();

  return (
    <div>
      <FormControl component="fieldset">
        <RadioGroup
          aria-label="position"
          name="position"
          value={value}
          onChange={handleChange}
          row
        >
          <FormControlLabel
            classes={{ label: classes.label }}
            variant="caption"
            value="all"
            control={<Radio color="primary" />}
            label="first"
            labelPlacement="end"
          />
          <FormControlLabel
            value="second"
            control={<Radio color="primary" />}
            label={<Typography variant="caption">Second</Typography>}
            labelPlacement="end"
          />
        </RadioGroup>
      </FormControl>
    </div>
  );
}


Com relação a questão que você apontou sobre como customizar seus componentes com o Material-UI, a seção de customização da documentação tem várias formas de como fazer.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .