f:id:moyashidaisuke:20191004235126p:plain

概要

Vue Styleguidistで、stylesの変更（見た目の変更）のやり方についてです。

今までの www.moyashidaisuke.com

www.moyashidaisuke.com

概要
公式
解説

公式

ここに書いてあります。

vue-styleguidist.github.io

が、例の如く解説が全体的に足りないので、参考程度です😇

解説

見た目の変更要素としては、themeとstylesの2種類あります。

theme

予め変数として定義されているものをoverrideできます。

変数の一覧はこちら。

github.com

そんなにたくさん無いですね。

styles

stylesはStyleguidistで使われているコンポーネントに対して調整をする事で見た目の変更をします。

サンプルで提供されている通り、ロゴの変更であれば、

styles: {
    Logo: {
      logo: {
        animation: 'blink ease-in-out 300ms infinite'
      },
      '@keyframes blink': {
        to: { opacity: 0 }
      }
    }
  }

なのですが、Styleguidistで使われているコンポーネントって何で、何が調整できるかはドキュメント化されていません。頑張ってコードを追う必要があります。

コンポーネントの探し方

まず、修正したいDOMの要素を探します。

例えばロゴだと、HTMLは

<h1 class="rsg--logo-27">styleguidist</h1>

.rsg--logo-27 {
    color: #333;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 18px;
    font-weight: normal;
}

このmarginを修正しようとする場合、まず、rsg--logo-27の数字部分はただの連番なので無視します、

で、rsg もコンポーネントのprefixなので無視で大丈夫です。

そうすると残るのはlogoで、この名前に該当するコンポーネントがここにあるか探します。

github.com

Logoは無いですね！こういう時はReactStyleguidistのコンポーネントを探します。

なぜReactStyleguidistかは後で説明します。

github.com

Logoありますね！

これの中身を追うと、

const styles = ({ color, fontFamily, fontSize }) => ({
    logo: {
        color: color.base,
        margin: 0,
        fontFamily: fontFamily.base,
        fontSize: fontSize.h4,
        fontWeight: 'normal',
    },
});

があります。これがstylesで指定できるものです。

なので、

styles: {
    Logo: {
      logo: {
        margin: '10px'
      },
    }
  }

とかにすればOKです。

なぜReact？

実はVue Styleguidistは、react-styleguidistのwraperとして実装されています。

中で使用しているコンポーネントも半分以上がreact-styleguidistのコンポーネントを使っています。

よく見るとthemeの変数の一覧もreact-styleguidistですね。

後発とは言え、Reactに依存しているVueという構図が見えますね・・・

もやぶろ

moyashidaisukeのブログだからもやぶろ。フリーランスのエンジニアのダイスケです。QOLあげて色々楽しくチャレンジして良く生きたい。プログラム関連とかギター関連とか旅行関連とか色々。

【vue】Vue Styleguidistの使い方を説明④ 〜見た目を変える〜

概要

公式

解説

theme

styles

コンポーネントの探し方

なぜReact？