如何在纯HTML文件中使用MUI样式？React组件转HTML场景

不能直接用。原因有三点：

1. MUI的类名（尤其是组件内部元素的类）很多是动态生成的哈希值（比如MuiAutocomplete-tag-xyz），你没法提前预知这些类名；
2. MUI的样式依赖它的CSS-in-JS方案（Emotion/JSS）动态注入，纯HTML里没有这些样式代码，就算你猜对了类名，也出不来对应的视觉效果；
3. MUI组件的交互逻辑依赖React的状态管理，纯HTML没法直接复用这些逻辑。

如果要在纯HTML环境实现和MUI Autocomplete同款的输入组件，有两种可行方案：

方案1：用React+MUI CDN直接实现（完全还原MUI效果） #

通过引入React、MUI的CDN资源，在HTML文件里直接编写React组件，能100%还原MUI Autocomplete的样式和功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MUI Autocomplete 纯HTML实现</title>
  <!-- React及ReactDOM CDN -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- Babel解析JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- MUI依赖的字体与样式 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <!-- MUI核心库CDN -->
  <script src="https://unpkg.com/@mui/material@5/umd/material-ui.development.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    const { Autocomplete, TextField, Box } = MaterialUI;

    // 选项数据
    const options = [
      { label: '选项1', value: 'opt1' },
      { label: '选项2', value: 'opt2' },
      { label: '选项3', value: 'opt3' },
      { label: '选项4', value: 'opt4' }
    ];

    ReactDOM.render(
      <Box sx={{ width: 300, margin: '2rem auto' }}>
        <Autocomplete
          options={options}
          renderInput={(params) => <TextField {...params} label="选择选项" variant="outlined" />}
        />
      </Box>,
      document.getElementById('root')
    );
  </script>
</body>
</html>

这个方案的优点是代码简洁、效果完全和MUI一致，缺点是需要加载React和MUI的CDN资源，适合对还原度要求高的场景。

方案2：纯原生HTML+CSS+JS复刻样式与功能 #

完全不依赖React框架，手动复刻MUI的视觉样式，自己实现输入筛选、下拉选择等交互逻辑。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复刻MUI样式的Autocomplete</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
    }

    .autocomplete-container {
      width: 300px;
      margin: 2rem auto;
      position: relative;
    }

    .autocomplete-input {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid rgba(0, 0, 0, 0.23);
      border-radius: 4px;
      font-size: 1rem;
      outline: none;
      transition: border-color 0.2s ease;
    }

    .autocomplete-input:focus {
      border-color: #1976d2;
      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
    }

    .autocomplete-label {
      position: absolute;
      top: -7px;
      left: 14px;
      background-color: white;
      padding: 0 4px;
      font-size: 0.75rem;
      color: rgba(0, 0, 0, 0.6);
      transition: color 0.2s ease;
    }

    .autocomplete-input:focus + .autocomplete-label,
    .autocomplete-input:not(:placeholder-shown) + .autocomplete-label {
      color: #1976d2;
    }

    .autocomplete-dropdown {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      border: 1px solid rgba(0, 0, 0, 0.23);
      border-radius: 4px;
      background-color: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      max-height: 200px;
      overflow-y: auto;
      display: none;
      z-index: 100;
    }

    .autocomplete-dropdown.open {
      display: block;
    }

    .autocomplete-option {
      padding: 10px 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .autocomplete-option:hover,
    .autocomplete-option.active {
      background-color: rgba(25, 118, 210, 0.08);
    }
  </style>
</head>
<body>
  <div class="autocomplete-container">
    <input type="text" class="autocomplete-input" placeholder=" " id="autocompleteInput">
    <label class="autocomplete-label" for="autocompleteInput">选择选项</label>
    <div class="autocomplete-dropdown" id="autocompleteDropdown"></div>
  </div>

  <script>
    const input = document.getElementById('autocompleteInput');
    const dropdown = document.getElementById('autocompleteDropdown');
    const options = [
      { label: '选项1', value: 'opt1' },
      { label: '选项2', value: 'opt2' },
      { label: '选项3', value: 'opt3' },
      { label: '选项4', value: 'opt4' }
    ];

    // 渲染下拉选项
    function renderOptions(filteredOptions) {
      dropdown.innerHTML = '';
      filteredOptions.forEach((option) => {
        const optionEl = document.createElement('div');
        optionEl.className = 'autocomplete-option';
        optionEl.textContent = option.label;
        optionEl.dataset.value = option.value;
        
        // 点击选项填充输入框
        optionEl.addEventListener('click', () => {
          input.value = option.label;
          dropdown.classList.remove('open');
        });

        // 鼠标 hover 高亮
        optionEl.addEventListener('mouseenter', () => {
          document.querySelectorAll('.autocomplete-option.active').forEach(el => el.classList.remove('active'));
          optionEl.classList.add('active');
        });

        dropdown.appendChild(optionEl);
      });
    }

    // 根据输入内容筛选选项
    function filterOptions(value) {
      return options.filter(option => 
        option.label.toLowerCase().includes(value.toLowerCase())
      );
    }

    // 输入事件监听
    input.addEventListener('input', (e) => {
      const value = e.target.value;
      const filtered = filterOptions(value);
      renderOptions(filtered);
      dropdown.classList.toggle('open', filtered.length > 0);
    });

    // 聚焦时打开下拉框
    input.addEventListener('focus', () => {
      const filtered = filterOptions(input.value);
      renderOptions(filtered);
      dropdown.classList.toggle('open', filtered.length > 0);
    });

    // 点击外部关闭下拉框
    document.addEventListener('click', (e) => {
      if (!input.contains(e.target) && !dropdown.contains(e.target)) {
        dropdown.classList.remove('open');
      }
    });
  </script>
</body>
</html>

这个方案的优点是不依赖任何框架，资源体积小，缺点是需要手动维护样式和逻辑，无法自动同步MUI的版本更新。

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