vanilla-extract を使っていてライブラリが element に直接出力する CSS をどうしても上書きする必要があり !important を使おうとしたのですが TypeScript の型でハマったのでメモ
vanilla-extract を使って !important を使う
ライブラリの出力 CSS を上書きするために !import を指定するとセレクタの箇所で type error になる
import { globalStyle } from '@vanilla-extract/css'; globalStyle('#lib-container', { position: 'relative !important', });
=> (property) position?: CSSVarFunction | Property.Position | (CSSVarFunction | Property.Position | undefined)[] | undefined
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
as でキャストしてしまえば OK
むりやり感はあるが as でキャストすれば type error にならず、問題なく !important な CSS が出力される
import { globalStyle } from '@vanilla-extract/css';
globalStyle('#lib-container', {
- position: 'relative !important',
+ position: 'relative !important' as 'relative',
});
何でキャストするかは CSS のプロパティで変える必要がある
CSS を書く時に !important はカオスを産む根源だと思っているので、どうしてもという場合を除いて使わないほうが良いと考えています。
今回の方法はあまりお行儀が良くないと思うが、どうしても必要な場合は as でキャストすれば TypeScript な vanilla-extract でも問題なく !important が使えることが解りました。
たぶんドキュメントにも書かれてない気がする (!important 使わない設計になるよね。って思想だと思うのでそれはそう)
[参考]
