📑

Styled SystemでfontSizeのデフォルト出力をpxではなくremにする方法

2020/10/09に公開

React

Styled SystemにおけるfontSizeの標準の出力方式はpxです。
しかし時に人はremや他の単位を使いたくなるものです。

Styled Systemは内部で使っているlow level関数を公開してくれています。

https://styled-system.com/api#system

これを使いましょう。ドキュメントが不親切だったり、.d.tsの定義が雑なあたり今後breaking changeが入るんだろうな感が否めないですが、内部のコードを読んで雰囲気を感じ取ります。

ととのいました。

const fontSizeRem = system({
  fontSize: {
    property: 'fontSize',
    scale: 'fontSizes',
    transform: (value, scale) => {
      const config = get(scale, value);
      // body { font-size: 62.5%; } が指定されているという思い込みベースの計算
      return `${config / 10}rem`;
    },
  },
});

/*
あとの定義が優先されるので
const Text = styled('p')(
  typography,
  fontSizeRem,
  ...

とすることでtypographyを利用していても上書きが可能。
*/

これで、例えばthemeのfontSizeの定義が [1, 2, 4, 8] だった場合に <Text fontSize={2} /> とすると、実際のCSSでは font-size: 0.4rem とレンダリングされます。やりましたね。

おまけ

いろいろな場所で上記のsystemを使いたい、typographyを上書きしたい!! という場合はcomposeを使うといいかんじになります。

const customTypo = compose(typography, fontSizeRem);

おまけ

Discussion