CODEWITHSUNDEEP
javascriptcssreactjssass
Иван Никулин
Иван Никулин

Reputation: 56

ReactJS makes <head> html tag visible on import css/sass in react element

I'm writing a "Hello World" app using create-react-app flow, but when I'm trying to import a css/sass in my react components tag stay visible and style text appears in my page background 😕😕😕😕

I tried to install some npm modules, but it didn't help, here they are:

Some pieces of my code:

index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>

  </body>

</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

App.js

import React from 'react';
import SimpleForm from "./SimpleForm"

const App = () => {
  return (
    <div>

      {/* nothing changes if I comment this ↓ guy  */}

      <SimpleForm />
    </div>
  );
}

export default App;

and a piece of SimpleForm.js

import React from 'react';
import './SimpleForm.scss';
import Greetings from "./Greetings"

class SimpleForm extends React.Component {

...

    render() {
      const { firstNameError, firstName } = this.state;

      return (
        <div className="main">
            <input
                type="text"
                name="firstName"
                onChange={this.onFirstNameChange}
                onBlur={this.onFirstNameBlur}
            />
            {firstNameError && <div className="error">{firstNameError}</div>}
            <Greetings
                firstName={firstName}
            />
        </div>

  );
}

export default SimpleForm

SimpleForm.scss/css doen't include smthng special, so I think it can't produce this crush

(I tried import './SimpleForm.css'; too)

Now I have such result:

error show 1

error show 2

But wan't to have something near this

dream

UPD_1:

SimpleForm.css (compiled from SimpleForm.scss)

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  align-self: center;
  margin-top: 20px;
  display: block;
}

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1b224b;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

input {
  width: 30%;
  font-size: 40px;
  color: #77c848;
  border: none;
  border-bottom: 2px solid #77c848;
  background: none;
  outline: none;
}

/*# sourceMappingURL=SimpleForm.css.map */

UPD_2

Greetings.js

import React from "react"

const Greetings = ({ firstName, lastName }) => (
    <div>
        Hey you! {firstName} {lastName}!
    </div>
);

export default Greetings;

Upvotes: 3

Views: 2257

Answers (2)

Иван Никулин
Иван Никулин

Reputation: 56

I solved this problem myself. The problem was in _share.scss file. I just changed this:

$primaryColor: #1b224b;
$secondaryColor: #77c848;

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  align-self: center;
  margin-top: 20px;
  display: block;
}

To this: 

$primaryColor: #1b224b;
$secondaryColor: #77c848;

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  align-self: center;
}

and now everything works, i think thak display: block style property was applying to <style> tag too, because of the class was *

Upvotes: 0

Farzam Babar
Farzam Babar

Reputation: 100

simply comment your css and add 

body{
 background: #F00;
}

to check either your css file import correctly. I guess you are using flex with position absolute make some trouble.

Upvotes: 1

Related Questions