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

プログラム全般

f:id:moyashidaisuke:20191004235126p:plain

概要

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

今までの
www.moyashidaisuke.com

www.moyashidaisuke.com

www.moyashidaisuke.com

公式

ここに書いてあります。

vue-styleguidist.github.io

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

解説

見た目の変更要素としては、themestylesの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という構図が見えますね・・・

コメント

タイトルとURLをコピーしました