CODEWITHSUNDEEP
cssreactjs
John Doah
John Doah

Reputation: 1999

React components does not get effected by css

I create two components in React, and I want to display them both on the App component. While they do show on the page, I can't use CSS to give each of them flex for example. I want each component to take half of the screen size, this is what I have:

import "./App.css";

function App() {
  return (
    <div className="App">
      <TopJourney id="Top-journey-section" />
      <JourneysSection id="Journeys-section" />
    </div>
  );
}

export default App;

This is the App.css:

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
}

#Top-journey-section {
  flex: 1;
}

#Journeys-section {
  flex: 1;
  background-color: greenyellow; // I added this just to be sure that the css does not work.
}

What is going wrong here?

Upvotes: 0

Views: 31

Answers (3)

Shehan Hasintha
Shehan Hasintha

Reputation: 1165

This is a confusion of css flexbox column and row. it should be row and change the id into className, then.... change the css file as well below.

import "./App.css";

function App() {
  return (
    <div className="App">
      <TopJourney className="Top-journey-section" />
      <JourneysSection className="Journeys-section" />
    </div>
  );
}

export default App;

CSS file should be looks like this

.App {
  text-align: center;
  display: flex;
  flex-direction: row;
  width:100%;
}

.Top-journey-section {
  width:50%;
}

.Journeys-section {
  width:50%;
  background-color: greenyellow; // I added this just to be sure that the css does not work.
}

Upvotes: 0

Aadil Mehraj
Aadil Mehraj

Reputation: 2614

Your selectors id or className only works on native HTML elements, not on Components, try adding styles on HTML dom elements instead. For components, these are just regular props that you can use within the component.

Upvotes: 1

Michał Lach
Michał Lach

Reputation: 1278

You are passing id as a prop to your component, but you are not using it.

Wrong:

 <TopJourney id="Top-journey-section" />

Good:

function TopJourney({id}) {
 <div id={id}>your component stuff</div>
}

Upvotes: 4

Related Questions