How Are Styles Done In React?

1

Hey guys,

I’m new to react and I am having trouble styling with it. I used create-react-app to create my project and I got a bunch of files I don’t quite know the purpose of. I presumed I should work within the src folder. There lie two css folders: App.css and index.css. I edited both, and it appears that editing App.css creates a style within some html style tags. However, despite it being valid css that would otherwise work, it just doesn’t here.

I’m mainly trying to change my component’s background color…which raises the question: couldn’t I just use states and some sort of inline style to do that anyway? How would that work?

Also, where are the style tags coming from in my index.html file?They weren’t there before…

For better reference, here is my code:

myEnvironment
myEnvironment223×580 10.4 KB

MainContainer.js:

import React, { Component } from 'react'
import './../App.css' //importing these css files was from previous attempts at just setting the id...I know it probably doesn'y matter now
import './../index.css'

class MainContainer extends Component
{
    
    
    render()
    {
        console.log(this.props);
        return(
            <div id = {this.props.id}>
            </div>
        );
    }
}

export default MainContainer;

App.js:

import React from 'react';
import logo from './logo.svg';
import MainContainer from './components/MainContainer.js';
import './App.css';

function App() 
{
  return (
    <MainContainer id="mainContainer"/>
  );
}

export default App;

App.css:

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#mainContainer
{
    background-color: blue;
    height: 20%;
    width: 20%;
}

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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Tic Tac Toe</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

The result:

maScreen0
maScreen01918×880 64.3 KB

Again, where is the style coming from and how would you recommend changing the background color of my component?

Thanks for your help!

2

I think you’re not seeing the div because its height is 0. Try giving it a px height value just to see that the styles work.

Instead of putting every style in App.css, you can have an accompanying MainContainer.css file where you’ll place all of the styles related to the MainContainer component (do the same for any component that needs styling). You can put it in the same directory as MainContainer.js, then import it as:

import React, { Component } from 'react'
import './MainComponent.css'
// no need to import `index.css`. It is imported in `index.js`. Page-wide styles typically go there.
3

Thanks, that worked. Though, I already gave it a percentage and that didn’t work. Do you know why that might be?

4

% height of an element depends on the height of its parent element. By default an element’s height depends on its content (for example, a <p> element’s height depends on how much text is in it). Since your page is empty, it has a height of 0. The #mainContainer's height would then be 20% of that, which is still 0.