为什么我的 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>

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

【问题讨论】：

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

标签： javascript html reactjs next.js tailwind-css

【解决方案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 上有填充。即使没有文字也应该可见。
确实应该。可能是代码结构的某种问题