В Material UI значок не работает должным образом
Я использую Material UI. В документе показано, что я могу использовать:
import Icon from "@material-ui/core/Icon";
...
<Button variant = "contained" color = "primary" className = {classes.button}>
blabla
<Icon className = {classes.rightIcon}>send</Icon>
</Button>
но то, что он показывает, - это кнопка с текстом «BLABLA SE», что неверно.
Но когда я использую:
import SendIcon from "@material-ui/icons/Send";
....
<Button variant = "contained" color = "primary" className = {classes.button}>
Blabla
<SendIcon className = {classes.rightIcon} />
</Button>
Он работает нормально, с текстом BLABLA и значком отправки слева от него.
В песочнице, представленной в документе, работают оба. Итак, почему в первом случае нет работать на меня?
@Tholle у меня последняя версия 3.3.2, и в песочнице написано: "@ material-ui / core": "latest" `
Ответы 2
Я думаю, что в этом примере документации есть ошибка: https://material-ui.com/demos/buttons/#buttons-with-icons-and-label
import Icon from '@material-ui/core/Icon';
должно быть
import SendIcon from '@material-ui/icons/Send';
Вот рабочая версия с этой заменой: https://codesandbox.io/s/k3rjyoq32v
Модуль, импортированный по этому пути @material-ui/core/Icon, сам по себе не является значком svg, это компонент Icon, описанный здесь: https://material-ui.com/api/icon/
В основном это три способа работы с иконками в material-ui:
@material-ui/core/Icon: компонент, полезный для отображения значков шрифтов. См. https://material-ui.com/style/icons/#font-icons@material-ui/icons: пакет с набором Значки материалов, преобразованный в значки SVG, которые можно использовать в качестве компонентов React. См. https://material-ui.com/style/icons/#svg-material-icons@material-ui/core/SvgIcon: компонент для использования любого SVG в качестве значка. См. https://material-ui.com/style/icons/#svg-icons
спасибо, но мой вопрос в том, почему точный код, который работает в песочнице, не работает в моем проекте?
Не могли бы вы дать ссылку на песочницу, о которой вы говорите?
вот и вы, codeandbox.io/s/mzlo9lnqp9, я говорю о кнопке Send
Эта песочница не работает на моей стороне. Я не вижу значок «Отправить». И вы тоже ;-) codeandbox.io/s/k3rjyoq32v рабочая версия с модификацией, описанной в моем ответе. (Не используйте компонент "Значок" и вместо этого импортируйте значок "Отправить материал")
Я думаю, что вы решили свою проблему, так как я видел, что у вас есть значок, который отображается в вашем кодовом окне.
Была та же проблема, и я обнаружил, что я не импортировал семейство шрифтов значков материалов в index.html.
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
Только с указанным выше импортом компонент будет работать.
Та же проблема, и в документы говорится, что это необходимо
У вас есть такая же версия библиотеки в вашей среде, что и в песочнице?