Question

我正在尝试将基本组件作为gatsby主题并以该主题作为我的gatsby项目的基础是否可行，因此在新项目中，我将遮盖我想要调整的组件如我所愿。

我的问题是我可以遮盖部件的一部分吗？

例如：

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;

该怎么做，或者我可以隐瞒说<Artist>标签，然后将其删除到新项目中而不必重写整个组件？

PS：gatsby文档上的所有信息/教程都显示了如何对整个组件进行阴影处理或更改样式，但是我想要的是在组件内部删除/添加新标签/内容而无需重写整个组件。

Answer 1

简短的回答：不，你不能。

该问题的解决方案是将您的组件拆分为多个较小的组件，然后对它们进行阴影处理。

盖茨比偏分量阴影

1 个答案: