Styling components in React

Question

I am starting my studies/development with React but I have a problem in the stylization of the components. Even though importing the CSS file into my component, the style is not picking up. How can I fix this??

import React from 'react';

import './styles.css';

const Header = () => (
  <header id="main-header">JShunt</header>

);

export default Header;

import React from  'react';

import './styles.css';

import Header from './components/Header';


const App = () => (
    <div className="App">
      <Header/>
      <p>Bricando com React</p>
    </div>
);

export default App;

header #main-header {
  width: 100%;
  height: 60px;
  background: #da552f;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 1

shows your directory, the Header css in the same directory as the Header component?

missing put tbm the Return, left the correct example

import React from 'react';

import './styles.css';

const Header = () => {
  return (
    <header id="main-header">JShunt</header>
  )
}

export default Header;