按钮没有统一的填充
Buttons don't have uniform padding
我正在使用无头 UI 选项卡组件,当我按照下面的代码向按钮添加填充时,我希望所有按钮都有统一的填充,但这里似乎存在一些问题。
Headless 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>
结果:
可能的原因:
按钮填充似乎被 headless UI 渲染了两次,否则按钮本身具有所需的填充。
此外,如果有任何帮助,我添加了 .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 解决了这个问题。我仍然不太确定它是如何解决的
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
我正在使用无头 UI 选项卡组件,当我按照下面的代码向按钮添加填充时,我希望所有按钮都有统一的填充,但这里似乎存在一些问题。
Headless 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>
结果:
可能的原因:
按钮填充似乎被 headless UI 渲染了两次,否则按钮本身具有所需的填充。
此外,如果有任何帮助,我添加了 .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 解决了这个问题。我仍然不太确定它是如何解决的
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