Accessoires sx conditionnels Mui V5

Comment utiliser les accessoires sx (mui v5) de manière conditionnelle.

Le prop sx est un raccourci pour définir des styles personnalisés qui ont accès au thème.

L' sxaccessoire vous permet de travailler avec un sur-ensemble de CSS qui regroupe toutes les fonctions de style exposées dans @mui/system. Vous pouvez spécifier n'importe quel CSS valide à l'aide de cet accessoire, ainsi que de nombreuses propriétés sensibles au thème qui sont uniques au système MUI.

Ensuite, voici quelques exemples d'utilisation des accessoires 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',
    }),