Bedingte SX-Requisiten Mui V5

So verwenden Sie sx props (mui v5) bedingt.

Die sx- Requisite ist eine Verknüpfung zum Definieren benutzerdefinierter Stile, die Zugriff auf das Thema hat.

Mit der sxRequisite können Sie mit einer Obermenge von CSS arbeiten, die alle in bereitgestellten Stilfunktionen bündelt @mui/system. Mit dieser Requisite können Sie jedes gültige CSS sowie viele themenbezogene Eigenschaften angeben, die nur für das MUI-System gelten.

Als nächstes gibt es ein paar Beispiele für die Verwendung der SX- Requisiten

<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',
    }),