Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Radio button adding unwanted height/width

See original GitHub issue

When using a radio button, it adds weird margins/padding to the radio buttons, and makes the text next to it appear not aligned.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The text with the radio buttons to be aligned.

Current Behavior

Steps to Reproduce (for bugs)

<Grid container direction="row">
  <Grid item>
   Transmit to Supplier?
  </Grid>
  <Grid item>
    <Grid container direction="row">
      <Grid item>
        <Radio
          color="primary"
          checked={shouldTransmitToSupplier === "yes"}
          onChange={_handleChange}
          value="yes"
        />
      </Grid>
      <Grid item>
        Yes
      </Grid>
      <Grid item>
        <Radio
          color="primary"
          checked={shouldTransmitToSupplier === "no"}
          onChange={_handleChange}
          value="no"
        />
      </Grid>
      <Grid item>
        No
      </Grid>
    </Grid>
  </Grid>
</Grid>

Here is an example using FormControl

<FormControl>
  <Grid container direction="row">
    <Grid item>
      <FormLabel>
        Transmit to Supplier?
      </FormLabel>
    </Grid>
    <Grid item>
      <RadioGroup
        value={shouldTransmitToSupplier}
        onChange={_handleChange}
        row
      >
        <FormControlLabel
          value="yes"
          control={<Radio color="primary"/>}
          label="Yes"
        />
        <FormControlLabel
          value="no"
          control={<Radio color="primary"/>}
          label="No"
        />
      </RadioGroup>
    </Grid>
  </Grid>
</FormControl>

Except this one shows up like this: