Gatsby partial component Shadowing

Question

I'm trying to see if it is viable to have a basic component as gatsby-theme and use this theme as base for my gatsby projects, so in the new project, I would be shadowing the components I want to adjust it as I want.

My question is can I shadow part of the component?

For example:

import React from "react";
import { ThemeProvider } from "styled-components";
import theme from "./theme";

import {
    TeaserContainer,
    ImageContainer,
    ImageWrapper,
    Title,
    Categories,
    ButtonContainer,
    Artist,
    FullWidthContainer,
    ReadTag
} from "./style.js";

const Teaser = () => {
    return (
        <ThemeProvider theme={theme}>
            <FullWidthContainer>
                <TeaserContainer>
                    <ImageContainer>
                        <ImageWrapper>
                            {
                                <img
                                    src="https://www.gonvillehotel.co.uk/wp-content/uploads/2019/06/Gatsby-Enchanted-Cinema-9.jpg"
                                    alt=""
                                />
                            }
                        </ImageWrapper>
                    </ImageContainer>
                    <Categories>Just categories</Categories>
                    <Title>Title</Title>
                    <ReadTag>Read it</ReadTag>
                    <p>Date</p>
                    <h1>Excerpt</h1>
                    <ButtonContainer>Button</ButtonContainer>
                    <Artist>
                        Submitted by <span>artist</span>
                    </Artist>
                </TeaserContainer>
            </FullWidthContainer>
        </ThemeProvider>
    );
};

export default Teaser;

How do, or can I shadow say the <Artist> tag, and removed it in the new project without having to rewrite the whole component?

PS: All the info/tutorial on gatsby docs show how to shadow the whole component or change styles, but what I want is to remove/add new tags/content inside a component without rewriting the whole component.

Answer 1

Short answer: No, you can't.

The solution to the problem is to split up your component into multiple smaller ones and then you shadow those instead.