React: How can I import a Title-Component which will be commonly used

I wanted to import a title-component in order to apply it throughout the app.

Here’s the title-component:

import styled from "styled-components";

const HeadTitle = styled.h2`
    font-size: 40px;

`
const Title = () => {

    return (
        <HeadTitle></HeadTitle>
    )
}

export default Title;

And in the component where I want to use it, no text is showing up:

return (
        <div>
            <Title>Best</Title>
        </div>
    );

I want to see "Best" with font-size 40px – how can I do that?

>Solution :

On the reusable component do:

import styled from "styled-components";
    
    const HeadTitle = styled.h2`
        font-size: 40px;
    
    `
    const Title = ({text}) => {
    
        return (
            <HeadTitle>{text}</HeadTitle>
        )
    }
    
export default Title;

On the component that’s to use the reusable component do (I’ll use ‘Home’ as an example):

import react from "react";
import Title from './Title.js';

const Home = () => {

    return (
        <Title text="This is home" />
    )
}

export default Home;