かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

React TypeScript vanilla-extract で !important が使いたい!

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 にならず、問題なく !importantCSS が出力される

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 使わない設計になるよね。って思想だと思うのでそれはそう)


[参考]