Указание «! Важно» для CSS «непрозрачность»

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)

Iсмог получить желаемый эффект, включив тег <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'],
            },
        },
    })
}