为CSS“opacity”指定“！important”

Question

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

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

这是我正在使用的代码的一小段，但它演示了错误：

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'],
            },
        },
    })
}