Material UIのBoxで次のように青色のボーダーを指定したとする。
<Box borderColor='blue' border={2}>テキスト</Box>
だが、実際には黒色のボーダーが表示された。
sxプロパティで指定してみてもダメだった。
<Box sx={{ borderColor: 'blue', border: 2 }} >テキスト</Box>
Chrome Devtoolsで要素のstyleを確認してみると次のようになっていた。
border-color: blue;border: 2px solid;
border-colorのあとでborderの一括指定をしているので、border-colorが上書きされてしまってる。
borderプロパティで色を書かなかった場合は、その要素のcolorプロパティの色になるとのこと。
そのためborderColor='blue'が無効となり黒色のボーダー色となっていた。
次のようにborderのあとにborderColorを指定すると青色のボーダーにすることができた。
<Box border={2} borderColor='blue'>テキスト</Box>
border: 2px solid;border-color: blue;