css - 更改单选按钮的大小

Question

我是 material-ui 的新手。尝试在组件中使用单选按钮，并希望使其更小。在 Chrome Inspect 中，我可以更改 svg 图标的宽度 (1em)。但是我该如何在 css 或 jsx 中做到这一点(使用 classes 属性)？

这就是生成的标记的样子。我想调整图标大小(类“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">Betalingskort (standard)</span>
</label>

--------更新------

这是 React 组件(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)

Answer 1

在你的CSS中，尝试:

.label svg {
    width: 1em;
}