Как настроить размер шрифта всплывающей подсказки Mateiral-UI в React

Question

Я реализовал всплывающую подсказку с Material-UI, но размер шрифта слишком мал. И я не могу изменить это с .s css.

import React from "react";
import "./InfoTooltip.scss";
import InfoIcon from '@material-ui/icons/Info';
import Tooltip from '@material-ui/core/Tooltip';

const InfoTooltip: React.FC<{ children?: any }> = ({ children }) => {
  const [label, ...rest] = children;
  return (
    <div className="info-tooltip-container">
      <div className="label-container">
        <Tooltip title={label}>
          <InfoIcon style={{ fontSize: '24px' }} />
        </Tooltip>
      </div>
      {rest}
    </div>
  );
};

export default InfoTooltip;

.info-tooltip-container {
  .label-container {
    font-size: 18px;
  }
  label {
    font-size: 18px;
  }
}

https://material-ui.com/es/components/tooltips/#tooltip

Answer 1

Вы можете добавить настроенный компонент непосредственно в реквизит title .

При необходимости вы можете добавить inline-styles к компоненту, который вы только что добавили.

Включите font-size

<Tooltip title={<h1 style={{ color: "lightblue" }}>title</h1>}>
  <InfoIcon />
</Tooltip>

---

См. Документ всплывающей подсказки MUI: настраиваемые подсказки