Изменение размера радиокнопок

Я новичок в материал-интерфейс. Попытка использовать радиокнопки в компоненте и хотела бы сделать его меньше. В 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)

Если вы разместите свой код, а не сгенерированную разметку, нам будет проще подсказать вам, где лучше всего установить ширину.

Steve Archer 10.08.2018 15:03

Спасибо, вот и все :)

olefrank 10.08.2018 15:08
1
2
4 379
1

Ответы 1

В своем css попробуйте:

.label svg {
    width: 1em;
}

Оно работает! Хотя label - это не класс, а элемент. Но я хотел бы знать, как сделать это способом "material-ui", используя свойство classes. Я не понимаю HoC withStyles. Вы можете привести пример, как это сделать?

olefrank 10.08.2018 15:23

Другие вопросы по теме