Skip to content

Conversation

@bartlangelaan
Copy link

@bartlangelaan bartlangelaan commented Feb 20, 2025

The following snippet is from the documentation:

<div
  sx={[
    { color: 'red' },
    selected && { fontWeight: 'bold' },
    disabled ? (theme) => ({ opacity: theme.state.disabledOpacity }) : { opacity: 1 },
  ]}
/>

However, this generates a TypeScript error that boolean is not allowed in the sx prop.

This PR allows for false values to be in the SxProp array, like it is allowed in @mui/system.

const test = true;
const sx4: SxProp = [
test ? { color: 'red' } : { backgroundColor: 'blue', color: 'white' },
false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add another test to verify this?

let selected: boolean | undefined;
const sx4: SxProp = [
  selected && { color: 'red' },
]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants