Как предотвратить появление белого текста из файла CSS в обработанном приложении React? - PullRequest
Новая
       0

Как предотвратить появление белого текста из файла CSS в обработанном приложении React?

0 голосов
/ 29 мая 2020

Я пытаюсь отобразить кнопку в 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;

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

Индекс. 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>

Как убрать этот текст с экрана, или он всегда там, и вам нужно его окружать?

Первое сообщение об ошибке

Второе сообщение об ошибке

1 Ответ

0 голосов
/ 29 мая 2020

Ваш CSS файл объявляет все элементы, которые должны быть видны с белым текстом, включая обычно невидимые, такие как <style> или <title>: 

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

Обычно, такие вещи, как <style>, по умолчанию имеют display: none, чтобы скрыть их, но здесь вы явно перезаписываете его на display: flex.

Вместо этого вы должны применять эти стили только к тем элементам, которые в них нуждаются, а не * (все элементы). Посмотрите на scoped CSS в React , чтобы узнать, как применять CSS правила только к элементам внутри определенного компонента.

Проблема с вашим существующим подходом заключалась в том, что CSS scoping in React работает в основном за счет добавления уникальных суффиксов к именам классов (так что ваш класс btntrue может стать btntrue_a732uw или что-то в этом роде, убедившись, что никакие два btntrue имена классов разных компонентов не будут классом sh), однако если вы не используйте имя класса для правила (например, вы делаете с *), оно также не может быть ограничено! Этого можно избежать, например, используя .allflex * вместо *, а затем применив имя класса allflex к элементу root вашего компонента.

...