На компоненты React не влияет css

Question

Я создаю два компонента в React и хочу отобразить их оба в компоненте App. Хотя они отображаются на странице, я не могу использовать CSS, например, чтобы дать каждому из них гибкость. Я хочу, чтобы каждый компонент занимал половину размера экрана, вот что у меня:

import "./App.css";

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

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

Что здесь не так ?

Answer 1

Вы передаете id в качестве опоры для своего компонента, но не используете его.

Неправильно:

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

Хорошо:

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

Answer 2

Ваши селекторы id или className работают только с собственными элементами HTML, а не с компонентами, попробуйте вместо этого добавить стили к элементам HTML dom. Для компонентов это обычные свойства, которые вы можете использовать в компоненте.

Answer 3

Это смешение css столбца и строки flexbox. он должен быть строкой и изменить id на className, затем .... изменить файл css также ниже.

import "./App.css";

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

export default App;

CSS файл должен выглядеть так

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