[system] `sx` type error when using `css` with the `sx` property

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

In a js project you can do something like this:

import React from "react";
import ReactDOM from "react-dom";
import Button from "@mui/material/Button";
import { css } from "@mui/system";

const green = css({ color: "primary.400" });
const red = css({ color: "red" });

function App() {
  const [flag, setFlag] = React.useState(false);
  return (
    <Button
      onClick={() => setFlag(!flag)}
      sx={[flag && green, !flag && red]}
      variant="outlined"
    >
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

See: https://codesandbox.io/s/usage-forked-54pr1?file=/index.js

However, if you try the same example as a typescript project, the tsc complains:

No overload matches this call.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type 'false | SerializedStyles' is not assignable to type 'SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type 'false | SerializedStyles' is not assignable to type 'SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)'.ts(2769)

See https://codesandbox.io/s/usage-forked-vouvj?file=/index.tsx

Expected behavior 🤔

The tsc should not complain

Steps to reproduce 🕹

https://codesandbox.io/s/usage-forked-vouvj?file=/index.tsx

Context 🔦

Thxs for this great project and all you hard work. ❤️

Your environment 🌎

See https://codesandbox.io/s/usage-forked-vouvj?file=/index.tsx

[hbjORbj]

@uwinkler

Here is a codesandbox I just created. Please check it out.

[samesfahani-tuplehealth]

I was just about to open an issue about this and came across this as well. Here is my repro working example:

https://codesandbox.io/s/example-material-demo-forked-3xv10?file=/demo.tsx

You can see that the code is “working”, but the type system is not happy.