时间戳

首页 > 解决方案 > 如何防止 CSS 文件中的白色文本出现在渲染的 React 应用程序中？

css - 如何防止 CSS 文件中的白色文本出现在渲染的 React 应用程序中？

问题描述

我正在尝试在 React 中渲染一个按钮，当您单击它时会更改文本和颜色。

我让它工作了，但是每当我渲染应用程序时，文件头部的标题和index.html文件中的文本App.module.css都会出现在页面上（白色文本）。我一直在寻找解决方案，但似乎找不到。

Btn.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;

应用程序.module.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;

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

我怎样才能从屏幕上删除这个文本，或者它总是在那里，你必须围绕它设置样式？

错误信息一

错误信息二

标签： cssreactjsreact-hooks

解决方案

您的 CSS 文件声明所有元素都以白色文本可见，包括通常不可见的元素，例如<style>or <title>：

* { /* Make ALL elements... */
  display: flex; /* ...displayed visibly, with "flex" display type... */
  color: white; /* ...and white text */
}

通常情况下，<style>默认display: none情况下会将它们隐藏起来，但在这里你明确地用display: flex.

相反，您应该将这些样式仅应用于需要它的元素，而不是*（所有元素）。查看React 中的作用域 CSS以了解如何将 CSS 规则仅应用于特定组件内的元素。

您现有方法的问题在于，React 中的 CSS 范围主要通过将唯一后缀附加到类名来工作（因此您的btntrue类可能会变成btntrue_a732uw或类似的东西，确保btntrue不同组件的两个类名不会发生冲突），但是如果您不'不要为规则使用类名（比如你用*），它也不能被限定！您可以通过使用.allflex *例如而不是 just来避免这种情况*，然后将allflex类名应用于组件的根元素。

推荐阅读