我正在尝试在 React 中渲染一个按钮，当您单击它时它会更改文本和颜色。
我让它工作，但每当我渲染应用程序时，index.html文件头部的标题和App.module.css文件的文本都会出现在页面上(白色文本(。我已经寻找了一个解决方案，但我似乎找不到。
顺便说一句.js
import styles from './App.module.css';
const Btn = ({toggleIt, toggle}) => {
return(
<>
<button onClick={toggleIt} className={toggle ? styles.btntrue : styles.btnfalse}>
{toggle ? "true" : "false"}
</button>
</>
);
}
export default Btn;
应用模块.css
* {
color: white;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.btntrue {
background-color: green
;
}
.btnfalse {
background-color: red
;
}
应用.js
import Btn from "./btn"
function App() {
const [toggle, setToggle] = useState(false)
const toggleIt = () => {
setToggle(!toggle)
}
return (
<React.Fragment>
<Btn
toggleIt = {toggleIt}
toggle = {toggle}
/>
</React.Fragment>
);
}
export default App;
索引.js(为了完整起见(
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-react-app" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
如何从屏幕上删除此文本，或者它始终存在并且您必须围绕它设置样式？
错误消息一
错误消息二
您的 CSS 文件声明所有元素都以白色文本可见，包括通常不可见的元素，如<style>或<title>：
* { /* Make ALL elements... */
display: flex; /* ...displayed visibly, with "flex" display type... */
color: white; /* ...and white text */
}
通常，默认情况下display: none<style>之类的东西才能隐藏它们，但在这里您可以通过display: flex明确覆盖它。
相反，您应该仅将这些样式应用于需要它的元素，而不是*(所有元素(。查看 React 中的作用域 CSS，了解如何将 CSS 规则仅应用于特定组件中的元素。
您现有方法的问题在于 React 中的 CSS 作用域主要通过在类名后附加唯一的后缀来工作(因此您的btntrue类可能会变得btntrue_a732uw或类似的东西，确保不同组件的两个btntrue类名不会发生冲突(，但是如果您不使用规则的类名(例如您使用*(， 它也不能被限定范围！例如，您可以通过使用.allflex *而不是仅使用*来避免这种情况，然后将allflex类名应用于组件的根元素。