![見出し画像](https://assets.st-note.com/production/uploads/images/106696591/rectangle_large_type_2_d7ab7b00bfec5c96f695903d976fe486.png?width=1200)
Photo by
3sp5p
React StorybookのCSSが適応されない
ReactにStorybookを導入しました
<button
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={{ backgroundColor }}
{...props}
>
{label}
</button>
上記のコードはデフォルトでStorybookに入ってたコードですが、classNameに配列を指定してjoin()メソッドでクラスネームを指定するものです
上記を参考にして書いたコードのCSSが適応されませんでした
className={["btn", ...buttonMode, ...buttonSize].join("")}
解決: join()メソッドの括弧の中にスペースを入れる
下記のようにスペースを入れると無事に適応されました
className={["btn", ...buttonMode, ...buttonSize].join(" ")}
Udemy
Atomic Designで考えるコンポーネント設計とCSS設計
https://www.udemy.com/share/107S683@Du14psqi7HMu2EHDUEP8j9sJcDfkBt3p7EDedGXjFZMVpuoh6mfsqmg5lil12mrEvg==/
この記事が気に入ったらサポートをしてみませんか?