为 CSS 'opacity' 指定 '!important'

Question

我在我的项目中包含一个第 3 方组件库，因此我无法控制其中定义的 CSS。根据这个页面（https://cssinjs.org/jss-syntax/?v=v10.0.0-alpha.22），可以使用这种方法指定!important属性：

const styles = {
    button: {
        color: [['red'], '!important'],
        margin: [[5, 10], '!important']
    }
}

这是我正在使用的代码的一个小sn-p，但它显示了错误：

const styles = (theme: Theme) => {
    return createStyles({
        '@global': {
            '.tree-node-selected': {
                opacity: [1, '!important'],
            },
        },
    })
}

错误是：

Type '{ '.tree-node-selected': { opacity: ReactText[]; }; }' is not assignable to type 'CSSProperties | (() => CSSProperties)'.
  Type '{ '.tree-node-selected': { opacity: ReactText[]; }; }' is not assignable to type 'CSSProperties'.
    Property ''.tree-node-selected'' is incompatible with index signature.
      Type '{ opacity: ReactText[]; }' is not assignable to type 'string | number | CSSProperties | undefined'.
        Type '{ opacity: ReactText[]; }' is not assignable to type 'CSSProperties'.
          Types of property 'opacity' are incompatible.
            Type 'ReactText[]' is not assignable to type 'number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined'.
              Type 'ReactText[]' is not assignable to type '"unset"'.ts(2322)

如果我将代码更改为：opacity: '1 !important'，则错误变为：

Type '{ '.tree-node-selected': { opacity: string; }; }' is not assignable to type 'CSSProperties | (() => CSSProperties)'.
  Type '{ '.tree-node-selected': { opacity: string; }; }' is not assignable to type 'CSSProperties'.
    Property ''.tree-node-selected'' is incompatible with index signature.
      Type '{ opacity: string; }' is not assignable to type 'string | number | CSSProperties | undefined'.
        Type '{ opacity: string; }' is not assignable to type 'CSSProperties'.
          Types of property 'opacity' are incompatible.
            Type 'string' is not assignable to type 'number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined'.ts(2322)

我已经能够通过在render()中包含一个<style>标签来获得我想要的效果，例如：

<style>{`.tree-node-selected {opacity: 1 !important}`}</style>

对于如何做到这一点，是否有人有任何其他/更好的建议？

Answer 1

看起来您在不透明度周围缺少一些方括号：

const styles = (theme: Theme) => {
    return createStyles({
        '@global': {
            '.tree-node-selected': {
                opacity: [[1], '!important'],
            },
        },
    })
}