我正在為react應用程序創建一個開關。目前，我的切換是兩個按鈕，每個按鈕都有自己的陰影，但在我當前的設置下[當它們并排時，陰影會與按鈕重疊]。(https://I . stack . imgur . com/ybisd . png)，當我想讓陰影堆疊在按鈕下面的時候。

下面是我的切換代碼

<div className="px-12">
        <div className="flex flex-col md:flex-row">
          <PrimaryButton
            text="Financed Emissions"
            onClick={() => setFlag('financedEmissions')}
            variant={
              flag === 'financedEmissions' ? 'clementine-toggled' : 'clementine'
            }
            toolTip={{
              title: 'Financed Emission',
              details:
                'Greenhouse gas (GHG) emissions indirectly caused by financial activities, investments, or lending practices of individuals, organizations, or institutions that support projects or activities contributing to climate change.',
            }}
          />

          <PrimaryButton
            text="Net Asset Value"
            onClick={() => setFlag('netAssetValue')}
            variant={
              flag === 'netAssetValue' ? 'clementine-toggled' : 'clementine'
            }
            toolTip={{
              title: 'Net Asset Value',
              details:
                "The total market value of all of a company's corporate bonds.",
            }}
          />
        </div>

這是我的主按鈕的代碼

import type { FC } from 'react'
import { ArrowRightIcon } from '@heroicons/react/24/solid'
import Link from 'next/link'
import clsx from 'clsx'

import ToolTip from '../tooltip/ToolTip'

interface PrimaryButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  text: string
  link?: string
  toolTip?: {
    title?: string
    details?: string | React.ReactNode
  }
  onClick?: () => void
  className?: string
  variant?: 'cobalt' | 'clementine' | 'clementine-toggled'
}

const PrimaryButton: FC<PrimaryButtonProps> = ({
  text,
  link,
  onClick,
  toolTip,
  className = '',
  variant = 'cobalt',
  ...props
}) => {
  const buttonStyle = clsx(
    'rounded border-2 border-solid',
    'rounded px-5 py-1',
    'shadow-[-8px_8px_0px_0px]',
    'hover:shadow-[-5px_5px_0px_0px]',
    {
      'bg-lightBlue border-cobalt shadow-cobalt hover:shadow-cobalt':
        variant === 'cobalt',
      'bg-white border-clementine shadow-clementine hover:shadow-clementine':
        variant === 'clementine',
      'bg-lightClementine border-clementine shadow-clementine hover:shadow-clementine':
        variant === 'clementine-toggled',
    },
    className,
  )

  return (
    <div>
      {link ? (
        <Link href={link}>
          <button onClick={onClick} className={buttonStyle} {...props}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span>{text}</span>
              {toolTip && (
                <>
                  <div style={{ width: '0.5rem' }} />
                  <ToolTip title={toolTip?.title} details={toolTip?.details} />
                </>
              )}
            </div>
            <ArrowRightIcon className="ml-1 inline h-9 w-5 stroke-current stroke-1" />
          </button>
        </Link>
      ) : (
        <button onClick={onClick} className={buttonStyle} {...props}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span>{text}</span>
            {toolTip && (
              <>
                <div style={{ width: '0.5rem' }} />
                <ToolTip title={toolTip?.title} details={toolTip?.details} />
              </>
            )}
          </div>
        </button>
      )}
    </div>
  )
}

export default PrimaryButton

我試圖編輯buttonStyle以使shadow和hover:shadow的z-index為-1，知道按鈕的其余部分的z-index默認為1。

const buttonStyle = clsx(
  'rounded border-2 border-solid',
  'rounded px-5 py-1',
  'shadow-[-8px_8px_0px_0px z-[-1]]',       // Add z-[-1] to the shadow class
  'hover:shadow-[-5px_5px_0px_0px z-[-1]]', // Add z-[-1] to the hover:shadow class
  {
    'bg-lightBlue border-cobalt shadow-cobalt hover:shadow-cobalt':
      variant === 'cobalt',
    'bg-white border-clementine shadow-clementine hover:shadow-clementine':
      variant === 'clementine',
    'bg-lightClementine border-clementine shadow-clementine hover:shadow-clementine':
      variant === 'clementine-toggled',
  },
  className,
);

但之后我的影子就消失了。