为啥我的 Tailwind CSS 切换按钮在深色模式下不可见？

Posted 2023-03-05

【中文标题】为啥我的 Tailwind CSS 切换按钮在深色模式下不可见？

【英文标题】：Why is my Tailwind CSS toggle button invisible in dark mode?为什么我的 Tailwind CSS 切换按钮在深色模式下不可见？

【发布时间】：2021-10-11 04:21:39

【问题描述】：

        <button
        aria-label="Toggle Dark Mode"
        type="button"
        className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3"
        onClick=() => setTheme(theme === 'dark' ? 'light' : 'dark')></button>

这是我用于按钮的代码。按钮在它应该在的位置，它可以工作，但它不可见。

【问题讨论】：

您是否尝试更改按钮的背景颜色，或者在标签之间添加一些文本以查看是否使其可见？

【参考方案1】：

我为你做了一个代码沙箱：工作正常。

这个元素可能没有宽度/高度，因为它里面什么都没有。

（按钮为空）

import React,  Component  from 'react';
import  render  from 'react-dom';
import useState from 'react'

const Home = () => 

    const [Theme, setTheme] = useState("light")

  return (
    <>

      <p>Theme is ____ Theme</p>

      <button
        aria-label="Toggle Dark Mode"
        type="button"
        className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3"
        onClick=() => setTheme(Theme === 'dark' ? 'light' : 'dark')>
        press
        
        </button>
    </>
  )


class App extends Component 
  render() 
    console.log('App started');

    return <Home/>;
  


render(<App />, document.querySelector('#app'));

【讨论】：

通常在Tailwind button 上有填充。即使没有文字也应该可见。

确实应该。可能是代码结构的某种问题