I am a newcomer to using material-ui. I am currently working on incorporating radio buttons in a component and would like to reduce its size. While inspecting it in Chrome, I was able to adjust the width of the svg icon (1em). However, I am unsure how to achieve this through css or jsx (using the classes prop).
This is the structure of the generated markup that needs resizing for the icon with the class "MuiSvgIcon-root-41":
<label class="MuiFormControlLabel-root-151 ContractOfferPaymentMethodSelector-label-148">
<span class="MuiButtonBase-root-54 MuiIconButton-root-48 MuiSwitchBase-root-160 MuiRadio-root-155 MuiRadio-colorSecondary-159 MuiSwitchBase-checked-161 MuiRadio-checked-156">
<span class="MuiIconButton-label-53">
<svg class="MuiSvgIcon-root-41" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path>
</svg><input class="MuiSwitchBase-input-163" name="paymentMethod" type="radio" value="Stripe">
</span>
<span class="MuiTouchRipple-root-57"></span>
</span>
<span class="MuiTypography-root-164 MuiTypography-body1-173 MuiFormControlLabel-label-154">Credit Card (standard)</span>
</label>
------- UPDATE ------
Here is the React component implemented in TypeScript:
import React, { ChangeEvent } from 'react'
import {
WithStyles,
Theme,
withStyles,
RadioGroup,
Radio,
FormControlLabel,
Card,
CardContent,
} from '@material-ui/core'
import { t } from 'translate'
interface IOwnProps {
active: boolean
paymentMethod: string
handleChange: (paymentMethod: string) => void
}
type TProps = WithStyles<typeof styles> & IOwnProps
const styles = (theme: Theme) => ({
card: {
padding: 0,
borderLeft: `8px solid ${theme.palette.secondary[500]}`,
},
label: {
display: 'flex',
flexBasis: '100%',
},
})
const ContractOfferPaymentMethodSelector: React.SFC<TProps> = (props: TProps) => {
const { classes, paymentMethod, handleChange } = props
return (
<div className="ContractOfferPaymentMethodSelector">
<header className="ContractOfferPaymentMethodSelector__header">
<div className="ContractOfferPaymentMethodSelector__header-title">{t('Payment method')}</div>
</header>
<Card className={`ContractOfferPaymentMethodSelector__main ${classes.card}`}>
<CardContent>
<RadioGroup
className="ContractOfferPaymentMethodSelector__group"
aria-label="Payment Method"
name="paymentMethod"
value={paymentMethod}
// tslint:disable-next-line:jsx-no-lambda
onChange={(e: ChangeEvent<{}>, value: string) => {
handleChange(value)
}}
>
<FormControlLabel
className={classes.label}
value="Stripe"
control={<Radio />}
label={t('Credit card (standard)')}
/>
<FormControlLabel className={classes.label} value="B2B" control={<Radio />} label={t('EDI charge')} />
</RadioGroup>
</CardContent>
</Card>
</div>
)
}
export default withStyles(styles)(ContractOfferPaymentMethodSelector)