React components does not get effected by css - css

Question

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?

Answer 1

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>
}

Answer 2

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.

Answer 3

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