Theme-ui: Feature request: use `!important` with theme value

[vanniewelt]

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?

[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

[vanniewelt]

Thanks, I didn't know that I can access theme object like this. I could definitely write helper with that, but I'm not sure it is possible to make it work universally for all properties — using appropriate theme scales according to the property. For example:

<div sx={{ fontSize: important(4) }} /> // uses `theme.fontScale[4]`
<div sx={{ ml: important(4) /> // uses `theme.space[4]`

Helper like that would need to be somehow aware of the context it is called in. Such resolution needs to happen on the library side (ie. in the styled-system — so maybe I should create issue there?). This would be really nice feature to have.

But for now, this solution is satisfactory.

EDIT: API could be different, of course, eg. [4, "!important"], "4 !important", { value: 4, important: true }

[jxnblk]

Closing this out for now -- I'd suggest making a custom utility if you need to use CSS !important

[Eddie-CooRo]

We're using theme-ui for theming some third-party libraries.
I'm trying to leverage the variants feature of theme-ui and some part of our theme looks like this:

variants: {
  ...,
  switch: {
    ".checked": {
      ".react-switch-bg": {
        bg: `${colors.success} !important`,
      },
    },
  },
},

Unfortunately, I'm not able to access the colors object directly here anymore.
And as this is part of the theme itself, the functional values and utilities you mentioned will not work.
Can you think of any other workarounds???
If not, love to see this supported in the theme-ui itself.
What's your opinion? May I work on an MR for it???

[atanasster]

Hi @Eddie-CooRo - can you try:

variants: {
  ...,
  switch: {
    ".checked": {
      ".react-switch-bg": {
        bg: theme => `${theme.colors.success} !important`,
      },
    },
  },
},

[Eddie-CooRo]

OK... I've used the function notation in the shadows property of the theme before and as it didn't work, I thought it won't work in the variants too.
But it does. thanks.
BTW I believe first-class support for the !important flag would be still useful.

[atanasster]

@Eddie-CooRo - thanks for the feedback!

[hasparus]

OK... I've used the function notation in the shadows property of the theme before and as it didn't work
And as this is part of the theme itself, the functional values and utilities you mentioned will not work.

shadows is a scale, a dictionary of design tokens, variants are just reusable style objects, so everything that works inside sx prop is allowed in them.

https://theme-ui.com/theme-spec/

[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.