next.js - ボタンには均一なパディングがありません

Question

私はヘッドレス UI タブ コンポーネントを使用しており、以下のコードのようにボタンにパディングを追加すると、すべてのボタンに均一なパディングが期待されますが、ここにいくつかの問題があるようです。

ヘッドレス UI タブ コンポーネント:

              <Tab.List className="flex sm:flex-col">
                    <Tab>
                    {({ selected }) => (
                        <button 
                        className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
                        >
                          Frontend
                        </button>
                      )}
                    </Tab>
                    <Tab>
                    {({ selected }) => (
                        <button
                        className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
                        >
                          Backend
                        </button>
                    )}
                    </Tab>
                    <Tab>
                    {({ selected }) => (
                        <button
                        className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
                        >
                          Multimedia
                        </button>
                    )}
                    </Tab>
                </Tab.List>

結果：

考えられる原因:

ボタンのパディングがヘッドレス UI によって 2 回レンダリングされているようです。それ以外の場合、ボタン自体に必要なパディングがあります。

また、それが役立つ場合は、.babelrc.js を追加し、ツイン マクロを機能させるために _document.js を更新しました。

.babelrc.js

module.exports = {
    presets: [['next/babel', { 'preset-react': { runtime: 'automatic' } }]],
    plugins: ['babel-plugin-macros', ['styled-components', { ssr: true }]],
  }

_document.js

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })
      const initialProps = await Document.getInitialProps(ctx)

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

どんな助けや提案も大歓迎です

編集:ボタンをdivに変更すると、問題が解決しました。どのように解決したかはまだよくわかりませんが、