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;
}

更改单选按钮的大小

1 个答案: