I've been through the documentation, but I'm struggling to understand how styling works in Material UI.
Currently, I have a radio-group component set up like this:
import React from 'react'
import Radio from '@material-ui/core/Radio'
import RadioGroup from '@material-ui/core/RadioGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import FormControl from '@material-ui/core/FormControl'
import FormLabel from '@material-ui/core/FormLabel'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles((theme) => ({
root: {
'& .MuiFormLabel-root': {
color: 'red',
},
},
formControl: {
margin: theme.spacing(3),
},
}))
const RadioInput = (props) => {
const classes = useStyles()
const { label, value, setValue, name, inputs } = props
return (
<FormControl component="fieldset" className={classes.root}>
<FormLabel component="legend">{label}</FormLabel>
<RadioGroup
aria-label={name}
name={name}
value={value}
onChange={(e) => setValue(e.target.value)}
row
>
{inputs.map((x, index) => {
return (
<FormControlLabel
key={index}
value={x.toLowerCase()}
control={<Radio />}
label={x}
/>
)
})}
</RadioGroup>
</FormControl>
)
}
export default RadioInput
Additionally, I have a text field component structured as follows:
import React from 'react'
import { TextField } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles((theme) => ({
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 300,
},
},
}))
const TextInput = (props) => {
const classes = useStyles()
const { label, value, setValue, error, type, helperText } = props
return (
<div className={classes.root}>
<TextField
label={label}
error={!!error ? true : false}
value={value}
onChange={(e) => setValue(e.target.value)}
helperText={!!error ? error : helperText}
type={type}
/>
</div>
)
}
export default TextInput
The problem arises when these components are combined, resulting in an unappealing layout:
https://i.stack.imgur.com/yYhXg.png
As shown in the image, the radio button is slightly offset to the right of the text field above it. My goal is to align the labels and position the radio buttons to the left in line with the labels.
If anyone could provide some guidance on resolving this issue, I would greatly appreciate it. Despite my efforts to follow the documentation, I haven't made any progress so far.