与其标签相对于其标签的密码和复选框

Question

我正在创建一个用于收养宠物和材料UI的清单页面。在首页上，我面临着有关带有标签的无线电按钮和复选框的问题。Checkbox和无线电按钮在垂直上方显示的标签非常远。我已经尽力了，但问题仍然存在。 这是我下面的文件。 `

import { useState } from "react";
import { Container, Typography, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Checkbox, Button, Box, Card, CardContent, FormGroup } from "@mui/material";
import PetsIcon from "@mui/icons-material/Pets";
import FavoriteIcon from "@mui/icons-material/Favorite";
import RabbitIcon from "@mui/icons-material/Pets";

export default function ListPetForm() {
  const [petType, setPetType] = useState("");
  const [bondedPair, setBondedPair] = useState("no");
  const [reasons, setReasons] = useState([]);
  const [duration, setDuration] = useState("1 month");

  const handleReasonChange = (event) => {
    const { value } = event.target;
    setReasons((prev) =>
      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
    );
  };

  return (
    <Container maxWidth="sm" sx={{ mt: 4, display: "flex", justifyContent: "space-between", flexDirection: 'column' }}>
      <Typography variant="h5" gutterBottom>
        Step 1: The Basics
      </Typography>
      
      <FormControl component="fieldset" sx={{ mb: 2 }}>
        <FormLabel component="legend">What type of pet are you rehoming? *</FormLabel>
        <Box sx={{ display: "flex", gap: 2, mt: 1 }}>
          {["Dog", "Cat", "Rabbit"].map((pet) => (
            <Card
              key={pet}
              onClick={() => setPetType(pet)}
              sx={{
                textAlign: "center",
                cursor: "pointer",
                border: petType === pet ? "2px solid green" : "1px solid gray",
                flex: 1,
              }}
            >
              <CardContent>
                {pet === "Dog" && <PetsIcon fontSize="large" />}
                {pet === "Cat" && <FavoriteIcon fontSize="large" />}
                {pet === "Rabbit" && <RabbitIcon fontSize="large" />}
                <Typography>{pet}</Typography>
              </CardContent>
            </Card>
          ))}
        </Box>
      </FormControl>

      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
        <FormControl component="fieldset" sx={{ mb: 2 }}>
          <FormLabel component="legend">Are you rehoming a bonded pair? *</FormLabel>
          <RadioGroup row value={bondedPair} onChange={(e) => setBondedPair(e.target.value)} sx={{ display: "flex", alignItems: "center", gap: 2 }}>
            <FormControlLabel value="no" control={<Radio sx={{ p: 0, m: 0 }} />} label="No" sx={{ display: 'flex', alignItems: 'center', gap: 1 }} />
            <FormControlLabel value="yes" control={<Radio sx={{ p: 0, m: 0 }} />} label="Yes" sx={{ display: 'flex', alignItems: 'center', gap: 1 }} />
          </RadioGroup>
        </FormControl>
        
        <FormControl component="fieldset" sx={{ mb: 2 }}>
          <FormLabel component="legend">Why do you need to rehome your pet? *</FormLabel>
          <FormGroup sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            {[
              "Behavioural Issues",
              "Busy Schedule",
              "Change in Family Circumstances",
              "Does not get along with another Pet",
              "Fostered",
              "Found or Abandoned",
              "Human Health Issues (e.g. allergy, sickness)",
              "Infant, young children or pregnancy",
              "Landlord permission issue",
              "Ongoing costs (e.g. lost job)",
              "Pet Medical expenses (e.g. vet procedure)",
            ].map((reason) => (
              <FormControlLabel
                key={reason}
                control={<Checkbox checked={reasons.includes(reason)} onChange={handleReasonChange} value={reason} sx={{ p: 0, m: 0 }} />}
                label={reason}
                sx={{ display: 'flex', alignItems: 'center', gap: 1, marginLeft: '24px' }} // Adjusted margin for alignment
              />
            ))}
          </FormGroup>
        </FormControl>
      </Box>

      <FormLabel component="legend" sx={{ mt: 3 }}>How long are you able to keep your pet/s while we help find a suitable new home? *</FormLabel>
      <FormControl>
        <RadioGroup value={duration} onChange={(e) => setDuration(e.target.value)} sx={{ border: '2px solid red' }}>
          {["Less than 1 month", "1 month", "2 months", "Until a home is found"].map((option) => (
            <FormControlLabel key={option} value={option} control={<Radio />} label={option} sx={{ display: 'flex', alignItems: 'center', gap: 1 }} />
          ))}
        </RadioGroup>
      </FormControl>
      
      <Button variant="contained" color="primary" sx={{ mt: 2 }}>Continue</Button>
    </Container>
  );
}

Answer 1

复选框和无线电按钮由于您在

sx

prop中添加的样式而被错位。您将边距和填充设置为零。您可以通过进行以下更改来解决它：

从
1. sx={{ p: 0, m: 0 }}

   和

   <Radio />

   。
   

   在

   sx

   prop
<Checkbox />
2. 应该解决您的未对准问题✅