按钮没有统一的填充

Posted 2023-03-06

【中文标题】按钮没有统一的填充

【英文标题】：Buttons don't have uniform padding

【发布时间】：2021-12-02 17:15:24

【问题描述】：

我正在使用一个无头 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 渲染两次，否则按钮本身具有所需的填充。

另外，如果有任何帮助，我已经添加了 .babelrc.js 并更新了 _document.js 以使双宏工作：

.babelrc.js

module.exports = 
    presets: [['next/babel',  'preset-react':  runtime: 'automatic'  ]],
    plugins: ['babel-plugin-macros', ['styled-components',  s-s-r: 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 解决了这个问题。我仍然不太确定它是如何解决的

【参考方案1】：

Tab 本身呈现一个button。因此，为了防止将 button 元素嵌套在另一个元素中，您需要在 Tab 组件上使用 as 属性：

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

  /*...*/
</Tab.List>

你也可以这样做：

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

  /*...*/
</Tab.List>

参考：https://headlessui.dev/react/tabs#styling-the-selected-tab