使用Material UI制作社交媒体按钮遇问题：图标无法显示

以下代码无法显示图标按钮中的图标：

import './App.css';
import React, {useState} from 'react';
import IconButton from '@mui/material/Button';
import AlarmIcon from '@mui/material/Icon';

const App = () => {
  const url = "https://api.quotable.io/random";
  let quoteData = {
    content: "Let time be your only competitor.",
    author: "Ahmed Saber"
  }
  const [quote, setQuote] = useState(quoteData)

  const generateQuote = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        console.log(data)
        setQuote(data)
      });
  }

  const copy = () => {
    navigator.clipboard.writeText(quote.author + " once said: " + quote.content)
    alert('copied')
  }

  return (
    <>
      <h1>Quote Generator React App</h1>
      
      <div className="container">
        <p>{quote.content}</p>
        <span>{quote.author}</span>
        <div className="btns">
          <button onClick={copy} className="btn">Copy</button>
          <button onClick={generateQuote}>Generate Another Quote</button>
        </div>
        <IconButton color="secondary" aria-label="add an alarm">
  <AlarmIcon />
</IconButton>
      </div>
    </>

  )
  
}


export default App;

问题原因 #

• IconButton导入错误：你从@mui/material/Button导入了IconButton，但正确的IconButton组件路径是@mui/material/IconButton。
• 图标导入错误：Material UI的具体图标（比如AlarmIcon）需要从@mui/icons-material包导入，而不是@mui/material/Icon——后者是用于自定义图标的基础组件，不是现成的图标。
• 可能未安装图标包：如果项目里没装@mui/icons-material，也会导致图标无法加载。

解决步骤 #

1. 安装Material UI图标包（如果未安装）：

npm install @mui/icons-material
# 或者用yarn
yarn add @mui/icons-material

2. 修正导入语句：

// 替换原导入
import IconButton from '@mui/material/IconButton';
import AlarmIcon from '@mui/icons-material/Alarm';

3. 修正后的完整代码：

import './App.css';
import React, {useState} from 'react';
import IconButton from '@mui/material/IconButton';
import AlarmIcon from '@mui/icons-material/Alarm';

const App = () => {
  const url = "https://api.quotable.io/random";
  let quoteData = {
    content: "Let time be your only competitor.",
    author: "Ahmed Saber"
  }
  const [quote, setQuote] = useState(quoteData)

  const generateQuote = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        console.log(data)
        setQuote(data)
      });
  }

  const copy = () => {
    navigator.clipboard.writeText(quote.author + " once said: " + quote.content)
    alert('copied')
  }

  return (
    <>
      <h1>Quote Generator React App</h1>
      
      <div className="container">
        <p>{quote.content}</p>
        <span>{quote.author}</span>
        <div className="btns">
          <button onClick={copy} className="btn">Copy</button>
          <button onClick={generateQuote}>Generate Another Quote</button>
        </div>
        <IconButton color="secondary" aria-label="add an alarm">
          <AlarmIcon />
        </IconButton>
      </div>
    </>
  )
  
}

export default App;

这样修改后，图标应该就能正常显示了。

内容的提问来源于stack exchange，提问作者mai mohamed