Feature request: use `!important` with theme value

I’d like to be able to do something like following:

<div sx={{ ml: important(4) }}>

that is, using theme value (eg. from space scale), but with !important appended to it in resulting CSS.

Is there currently any way to achieve this? I thought only of this:

const Component = () => {
  const { theme } = useThemeUI()
  return (
    <div sx={{ ml: `${theme.space[4]}px !imporant` }}
  )
}

Any ideas?

[hasparus]

BTW I believe first-class support for the !important flag would be still useful.

I think that CSS-in-JS solves the problem of specificity, and you can achieve everything you need without !important. I’d discourage using important, and I doubt we’ll introduce any “first-class support” for it.

[jxnblk]

There aren’t any helpers like what you’ve described currently, but you can also use functional values like so: ml: t => `${t.space[4]}px !important` – with that in mind, I think you might be able to create a utility that does this in a more ergonomic way