Tailwind hover触发全部元素及文本换行问题技术求助

问题1：hover样式异常触发 #

原因 #

1. Tailwind类名语法错误：你给<p>元素写的hover: bg-slate-800里，hover:和bg-slate-800之间有空格，Tailwind的变体语法要求变体与类名直接相连（如hover:bg-slate-800），空格会导致bg-slate-800被识别为普通类，所有<p>元素默认就会应用这个背景色。
2. 状态初始值错误：useState('false')用了字符串'false'而非布尔值false，导致下拉框初始就处于显示状态，容易混淆hover效果的判断。
3. 事件冒泡干扰：父<div>绑定了onClick事件，点击<p>元素时事件会冒泡到父元素，触发下拉框的显示/隐藏切换，可能让你误以为hover效果异常。

解决方法 #

• 修正Tailwind类名：把hover: bg-slate-800改为hover:bg-slate-800，确保变体和类名无空格。
• 修正状态初始值：将useState('false')改为useState(false)，用布尔值控制下拉框显示。
• 阻止事件冒泡：在<p>元素上添加onClick={(e) => e.stopPropagation()}，避免点击选项时关闭下拉框。

问题2：多单词国家名称自动换行 #

原因 #

1. 数组结构错误：当前countries数组是单个字符串元素，导致map后只生成一个<p>元素，内部内容因容器宽度不足换行。
2. 容器宽度不足：下拉框容器没有设置足够的最小宽度，导致多单词的国家名称被迫换行；直接用whitespace-nowrap会让内容溢出容器，但父容器是flex-col，不会导致元素排成一行，你遇到的情况大概率是数组结构错误导致的。

解决方法 #

• 修正数组结构：将每个国家作为独立的数组元素，比如：

  const countries = ['England', 'Scotland', 'Wales', 'Northern Ireland']
  

• 设置容器最小宽度：给下拉框容器添加min-w-[200px]（可根据需求调整数值），确保容器有足够宽度容纳多单词名称，避免自动换行。
• （可选）强制不换行：如果需要完全禁止换行，给<p>元素添加whitespace-nowrap，配合容器的最小宽度，既能保持列布局，又不会让内容换行。

修改后的完整代码 #

import React, { useState } from 'react'

const countries = ['England', 'Scotland', 'Wales', 'Northern Ireland']

const Location = () => {
    const [loc, setLoc] = useState({country: '', region: ''})
    const [isClicked, setIsClicked] = useState(false)

    return (
        <div 
            className='text-white relative'
            onClick={() => setIsClicked(!isClicked)}
        >
            Location
            {isClicked && ( 
                <div className='bg-slate-400 text-white p-6 absolute before:top-7 before:-left-7 flex flex-col gap-2 justify-center min-w-[200px]'>
                    <h3>All UK</h3>
                    {countries.map((country, index) => (
                        <p 
                            key={index}
                            className='hover:bg-slate-800 whitespace-nowrap'
                            onClick={(e) => e.stopPropagation()}
                        >
                            {country}
                        </p>
                    ))}
                </div>
            )}
        </div>
    )
}

export default Location

内容的提问来源于stack exchange，提问作者Erika