[docs] Dynamic value is used in sx prop incorrectly

[thiisiriya]

Related page

https://v6.mui.com/material-ui/migration/migrating-to-pigment-css/#sx-prop

Kind of issue

Broken demo

Issue description

Docks suggest "If a value depends on a variable, you need to move it to a CSS variable inside inline styles." but AFTER example includes the usage of a dynamic value in sx which actually throws an error:

<div>
  {items.map((item, index) => (
    <Box
      key={index}
      sx={{
        borderRadius: '50%',
        width: `max(6px - var(--offset), 3px)`,
        height: `max(6px - var(--offset), 3px)`,
        --> bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3', <--
      }}
      style={{
        '--offset': `${index}px`,
      }}
    />
  ))}
</div>

I think the demo should be overwritten leveraging array syntax like this:

<div>
  {items.map((item, index) => (
    <Box
      key={index}
      sx={[
        {
          borderRadius: '50%',
          width: `max(6px - var(--offset), 3px)`,
          height: `max(6px - var(--offset), 3px)`,
        },
        index === 0 ? { backgroundColor: 'primary.solidBg' } : { backgroundColor: 'background.level3' }
      ]}
      style={{
        '--offset': `${index}px`,
      }}
    />
  ))}
</div>

Context

No response

Search keywords: pigment-css

[siriwatknp]

You are right, thank you for reporting the issue.

The docs should be (PR welcome):

<div>
  {items.map((item, index) => (
    <Box
      key={index}
      sx={{
        borderRadius: '50%',
        width: `max(6px - var(--offset), 3px)`,
        height: `max(6px - var(--offset), 3px)`,
        bgcolor: `var(--bg)`,
      }}
      style={{
        '--offset': `${index}px`,
        '--bg': index === 0 ? 'var(--mui-palette-primary-solidBg)' : 'var(--mui-palette-background-level3)',
      }}
    />
  ))}
</div>