css-component.jsx

import './NameHeader.css'

export default function NameHeader({ title, name }) {
  return (
    <div className="name-header-container">
      <h1>{title}</h1>
      <h2>{name}</h2>
    </div>
  );
}

styled-component.jsx

const NameHeaderContainer = styled.div`
  border: 1px;
  padding: 5px;

  h1 {
    color: #red;
  }

  h2 {
    color: #yellow;
  }
`

export default function NameHeader({ title, name }) {
  return (
    <NameHeaderContainer>
      <h1>{title}</h1>
      <h2>{name}</h2>
    </NameHeaderContainer>
  );
}