cssのエクスポート

サーバーコンポーネントで styled-component 風の書き方

Next js で「クライアントコンポーネント」、「サーバーコンポーネント」が使えるようになりました。
今まで styled-component を使うことが多かったのですが、styled-component は「use client」つまりクライアントコンポーネントでしか使うことができません。
静的なコンポーネントをわざわざ「use client」するのはもったいない＋ module.css を使うのも面倒くさいので styled-component ライクな書き方をしてみました。

export const HogeWrapComponent = () => {
  return (
    <div style={style._WrapDiv}>
      <div style={style._TopDiv}>
        <p>hogehoge</p>
        <div>
          <input type="text" />
          <button style={style._Button}>Hoge</button>
        </div>
      </div>
    </div>
  )
};

export const style = {
  _WrapDiv: {
    padding: '20px',
    borderBottom: '1px solid #ccc',
  },

  _TopDiv: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '20px',
  },

  _Button: {
    margin: 0 auto;
  },
};

こんな感じで styled-component ライクに書くことができます。
意外とシンプル！

もっと良い方法がありましたらぜひ教えてください!!
それではまた。