【React Native】margin等の上書きと優先順位


React Native でライブラリを使っていて style の上書きがうまくできないことがあります。配列によるスタイル指定が機能しなかったり。

 

今回は margin の上書きが出来なかったことから色々試してみたという内容です。

バニラで書いてると気づきやすいですが、フレームワーク+ライブラリの状態だとハマりやすいので気を付けましょう。

効かないスタイル変更の原因

今回の対象は react-native-elementsButtonGroup です。

 

こんな感じで margin:0 の普通のボタングループを作成します。

Viewにくっつく形のボタングループにしたかったのですが、マージンが残ります、

padding, border, widthなどいじりまわすも、やはりmarginの問題でした。

 

ソースを見ると、該当箇所はこう。

styles.container はこうなってます。

通常のCSSだと margin-top の後ろに margin を指定すると上書きできますが、このmarginHorizontalmarginVerticalは上書きできませんでした。

 

とりあえず対処方法は簡単です。問題のスタイルを0にします。

 

borderTop だけ残して色々いじるとこういう感じになります。

下の4つがボタングループでタブ化したメニューになります。

marginの上書きについて

なんで上書きできないのかもう少し掘り下げてみましょう。

単純な正方形のViewを2つ作ってスタイルがどう上書きされるか見ます。

 

こんな感じの優先順位があって後ろに書くだけでは上書きできないです。

左:marginStart > marginLeft > marginHorizontal > margin

下:marginBottom > marginHorizontal > margin

より細かい指定方法が上位(かつStart, End > Left, Right)のようです。

これは padding も同様でした。

ちゃんと上書きするために

面倒ですがライブラリの実装を見て同じプロパティを上書きするのが一番良いと思いますが普通に面倒くさいです。

marginpaddingstring 指定ができるので、複数指定や !important など出来ないかと試行錯誤してみたけど良い方法は見つからなかった。

 

とりあえずの処置なら最も強い要素で上書きするのが簡単です。


コメントを残す

メールアドレスが公開されることはありません。