为什么我的 Tailwind CSS 切换按钮在黑暗模式下不可见？

Question

        <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>

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

Answer 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'));