Props sx condizionale Mui V5

Come usare sx props (mui v5) in modo condizionale.

Il prop sx è una scorciatoia per definire stili personalizzati che hanno accesso al tema.

L' sxelica ti consente di lavorare con un superset di CSS che impacchetta tutte le funzioni di stile esposte in @mui/system. Puoi specificare qualsiasi CSS valido usando questo prop, così come molte proprietà che riconoscono il tema che sono univoche per MUI System.

Successivamente, ci sono alcuni esempi di come utilizzare gli oggetti di scena sx

<FormControl sx={{ width: '100%' }}>
  <RadioGroup
    name="export-file-type"
    value={value}
    onChange={handleRadioChange}
  >
    {radioOptions().map((option) => (
      <FormControlLabel
        key={option.inputValue}
        value={option.inputValue}
        control={
          <Radio
            sx={{
              color: "#aa0d91",
              borderRadius: '2px',
              '&.Mui-checked': {
                color: "#ff0d91",
              },
              '&.MuiRadio-root:hover': {
                backgroundColor: 'transparent !important',
              },
            }}
          />
        }
        label={radioLabel(option.label, option.description)}
        disableTypography
        sx={{
          ...(option.inputValue === value && {
            boxShadow: `inset 1px 2px 5px rgba(0,0,0,0.3)`,
            border: `1px solid "#aa0d91" !important`,
            transform: 'scale(1.005)',
            transition: '0.5s ease-out',
          }),
        }}
      />
    ))}
  </RadioGroup>
</FormControl>

<FormControl sx={{ width: '100%' }}>

<Radio
  sx={{
    color: "#aa0d91",
    borderRadius: '2px',
    '&.Mui-checked': {
      color: "#ff0d91",
    },
    '&.MuiRadio-root:hover': {
      backgroundColor: 'transparent !important',
    },
  }}
/>

sx={{
    ...(option.inputValue === value && {
      boxShadow: `inset 1px 2px 5px rgba(0,0,0,0.3)`,
      border: `1px solid "#aa0d91" !important`,
      transform: 'scale(1.005)',
      transition: '0.5s ease-out',
    }),