Блог

Главная - Вопросы по программированию - Интерфейс Material: как изменить размер шрифта метки в React Material Ui Stepper?

Интерфейс Material: как изменить размер шрифта метки в React Material Ui Stepper?

#javascript #reactjs #react-native #material-ui

#javascript #reactjs #react-native #материал-пользовательский интерфейс

Вопрос:

В пользовательском интерфейсе React material я хочу изменить размер шрифта шаговой метки. Как этого добиться?

   function getSteps() {
    return [
      "OPTION 1",
      "OPTION 2",
      "OPTION 3"
      "OPTION 4"
     
    ];
  }

Ответ №1:

Возможно, вы могли бы добавить пользовательский css на свою веб-страницу :

 .MuiStepLabel-labelContainer span {
    font-size: xx-large;
}

Вы можете настроить желаемый размер шрифта, изменив значение «font-size».

Комментарии:

1. я не понял … вы можете объяснить

2. Вы можете просто применить этот css в свой файл css, чтобы изменить размер шрифта метки шагового интерфейса. Пользовательский интерфейс Material сгенерирует шаговую метку с классом «.MuiStepLabel-labelContainer». Упомянутый пользовательский css переопределит размер шрифта по умолчанию.

Ответ №2:

Укажите label имя правила CSS в classes реквизите

 import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  customLabelStyle: {
    fontSize: "24px"
  }
});

function App () {
  const classes = useStyles();

  return (
    <StepLabel classes={{label: classes.customLabelStyle}}>
  );
}