Для всплывающей подсказки Material-UI требуется удалить дочерний заголовок

Question

Я пытаюсь использовать компонент Material-UI Tooltip для компонента, который уже имеет свойство title.Я должен использовать ребенка с названием опоры.Можно ли как-нибудь использовать всплывающую подсказку Material-UI или мне нужно найти другую?

<Tooltip title='Disabled' aria-label='disabled button'>
  <RequiredImportedButton title={this._getTitleMessage()} />
</Tooltip>

Material-UI выдает эту ошибку:

index.js:2178 Предупреждение: Material-UI: вы предоставили свойство title для ребенка <Tooltip />.Удалите это свойство заголовка Delete или компонент всплывающей подсказки.

Спасибо за любую помощь, которая может у вас возникнуть.

Answer 1

Вы можете выбрать другое имя для свойства и передать его свойству title кнопки в компоненте RequiredImportedButton:

<Tooltip title='Disabled' aria-label='disabled button'>
  <RequiredImportedButton bTitle={this._getTitleMessage()} />
</Tooltip>

// RequiredImportedButton.js
function RequiredImportedButton(props) {
 const { bTitle} = props;

 ...

 return (<button title={bTitle}>My button</button>);
}

Answer 2

Используйте простой подход: оберните дочерний компонент в div.

<Tooltip title='Disabled' aria-label='disabled button'>
  <div>
    <RequiredImportedButton title={this._getTitleMessage()} />
  </div>
</Tooltip>