Allow the sx prop to work with statically defined variables

[ahtcx]

Summary

It seems that currently CSS objects must be defined inline for the sx prop to be picked up on and the styles statically extracted.

Ideally we would have the option to define static CSS object variables which can be provided to the sx prop.

Examples

<div sx={{ background: "blue" }} />
// ✅ this correctly renders as `<div className="..."></div>`

const elementCss = { background: "blue" };
<div sx={elementCss} />
// ❌ currently renders as `<div sx="[object Object]"></div>`
// ✅ ideally would render as `<div className="..."></div>`

Potentially if needed styles could require a css branding function to make it easy for the compiler to pick up on?

const elementCss = css({ background: "blue" });
<div sx={elementCss} />

Motivation

I have a large codebase using @emotion/react with their css prop and I have a lot of code very similar to my example below. Allowing this would enable simple migrations away from @emotion/react by substituting the css prop for the sx prop. Excited to see where this library goes, it looks great!

const rootCss = (theme) => css({ margin: theme.spacing(1) });

const rootByColor = {
  red: css({ background: "red" }),
  blue: css({ background: "blue" }),
};

function App(props) {
  return <div sx={[rootCss, rootByColor[props.color]]} />;
}

Search keywords: sx

[ahtcx]

Sorry about that, I'm now realising that the already exported css function works exactly as I'm describing above. 🤦

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ahtcx How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.