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)

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

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

有人对此有何其他/更好的建议？

Answer 1

好像您在透明度上缺少一些方括号：

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

为CSS'opacity'指定'！important'

1 个答案: