如何在纯HTML模板中基于Material UI Next主题实现单选按钮？

I totally get your frustration—when you’re working with a pure HTML template instead of React, the official Material UI Next docs (which are all React-focused) don’t give you a straight path. The dynamically generated DOM makes it hard to reverse-engineer, but we can build the radio buttons manually by mimicking the structure and styles that the React components produce.

Here’s a practical solution:

1. Replicate the DOM Structure #

Material UI’s radio buttons rely on specific class names and nested elements to style correctly. Use this HTML structure to match the component’s rendered output:

<div class="MuiFormControl-root">
  <label class="MuiFormLabel-root MuiInputLabel-root">Gender</label>
  <div class="MuiRadioGroup-root" role="radiogroup" aria-label="gender">
    <!-- Male Option -->
    <label class="MuiFormControlLabel-root">
      <input 
        class="MuiRadio-input" 
        type="radio" 
        name="gender" 
        value="male" 
        id="male-radio"
      />
      <span class="MuiRadio-root MuiIconButton-root">
        <span class="MuiIconButton-label">
          <span class="MuiRadio-icon MuiIcon-root"></span>
        </span>
      </span>
      <span class="MuiFormControlLabel-label" for="male-radio">Male</span>
    </label>

    <!-- Female Option -->
    <label class="MuiFormControlLabel-root">
      <input 
        class="MuiRadio-input" 
        type="radio" 
        name="gender" 
        value="female" 
        id="female-radio"
      />
      <span class="MuiRadio-root MuiIconButton-root">
        <span class="MuiIconButton-label">
          <span class="MuiRadio-icon MuiIcon-root"></span>
        </span>
      </span>
      <span class="MuiFormControlLabel-label" for="female-radio">Female</span>
    </label>
  </div>
</div>

2. Add Core Styling #

If you’re not importing the full Material UI CSS library, add these key styles to replicate the default look and behavior. These match the official radio button styling:

/* Base Radio Button Container */
.MuiRadio-root {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

/* Hide Native Input (We'll style the custom icon instead) */
.MuiRadio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Unchecked Radio Icon */
.MuiRadio-icon {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.54);
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

/* Checked State Styling */
.MuiRadio-input:checked + .MuiRadio-root .MuiRadio-icon {
  border-color: #1976d2; /* Material UI's default primary blue */
  background-color: #1976d2;
}

.MuiRadio-input:checked + .MuiRadio-root .MuiRadio-icon::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Form Container & Label Styles */
.MuiFormControl-root {
  margin: 16px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.MuiFormLabel-root {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.87);
}

.MuiFormControlLabel-root {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
}

.MuiFormControlLabel-label {
  margin-left: 8px;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.87);
}

3. Optional: Use Full Material UI CSS #

If you want exact parity with the official docs (including hover/focus states and responsive behavior), include the Material UI Next CSS file in your project (host it locally to avoid external links). This will handle all the extra styling automatically without you writing custom CSS.

This approach works because the React components in the docs ultimately render to this same HTML structure with these class names—we’re just cutting out the React layer and building it directly.

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